• css background 背景知识详解


    background 背景属性

    我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(background-image)。

    css 背景常见属性

    • background-color
    • background-position
    • background-size
    • background-repeat
    • background-origin
    • background-clip
    • background-attachment
    • background-image

    一、background-color

      background-color 属性设置元素的背景颜色。它会会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。如果不想它包含边框可以用它的另一个属性clip来处理。

    看效果图,我们知道默认背景颜色会填充边框的。

    它的取值有:

    1、关键字:red,blue等

    2、十六进制值:#ff0000

    3、transparent值

    4、inherit:从父元素那继承的值

    5、rgb、rgba(如rgba(255,255,0,.8))、hsl、hsla(如hsla(360, 50%, 50%, .5))

    二、background-position

      background-position属性顾名思义是用来控制背景的位置,它同时设定了元素和图片的原点,而原点决定了元素和图片中某一点的水平和垂直坐标。默认情况原点位于左上角。也就是说元素的左上角和图片的左上角是对齐的。

    它的取值:

    一、它的五个关键字:top、left、right、bottom、center。二二取值都可以成为它们的属性值。

    • top left
    • top center
    • top right
    • center left
    • center center
    • center right
    • bottom left
    • bottom center
    • bottom right

    上面的关键字如果只设定一个,那另外一个也会取相同的值。关键字的顺序不重要,left bottom和bottom left意思一样。

    二、百分比值:

      第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。只设定一个值,则只用来设定水平位置,而垂直位置会默认设为center。

    三、像素或其他css单位

      第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。

     此外还可以运用正负值,将图片左上角定位到元素外部,或将图片右下角推到元素外部。

    background-position: top right;background-repeat:no-repeat;
    

      效果图:

    三、background-repeat

      background-repeat 属性设置如何重复背景图像。默认背景图像在水平和垂直方向上重复。

    它的取值有:

    repeat:默认值

    repeat-x:水平方向重复

    repeat-y:水平方向重复

    no-repeat:图像只出现一次

     inherit:继承

    此外css3还新增二个值:

    background-repeat:round:为图片不被剪切,自动调整图片大小来适应背景区域。

    background-repeat:space:为图片不被剪切,自动添加图片间空白来适应背景区域。

    下图是值为background-repeat:space的效果图:

    下面是值为background-repeat:repeat-y的效果图:

    四、background-image

      该属性为元素设置背景图像。格式为background-image:url(图片路径)。

     五、background-size

    css3新增的背景尺寸,顾名思义就是来调整图片的尺寸。

    它的取值:

    百分比:%

    像素值:第一个值设置宽度,第二个值设置高度。

    cover:拉大图片,完全填满背景区;保持宽高比。

    contain:缩放图片,使其恰好适合背景区;保持宽高比。

      上面最后二个属性值会将很小的图片拉得很大,so会导致图片失真。

    六、background-attachment

    该属性规定元素内背景图片是否随元素滚动而移动。默认值是scroll。

    它的值:

    scroll

    fixed:背景图像不会随元素移动。通常应用给body元素中心位置添加水印等,让水印不随页面滚动而移动。

    inherit

    七、background-clip

      background-clip 属性规定背景的绘制区域。

    它的取值:

    content-box:背景被裁剪到内容框

    border-box:背景被裁剪到边框盒

    padding-box:背景被裁剪到内边距

    background-color:yellow;background-clip:content-box;padding:15px;
    

      上面的代码给容器增加了15px的内边距后,背景被裁剪了内容区域里,

    效果图如下:

      

    八、background-origin

      background-origin 属性规定 background-position 属性相对于什么位置来定位。

    取值:

    content-box:背景图像相对于内容框来定位

    border-box:背景图像相对于边框来定位

    padding-box:背景图像相对于内边距框来定位

      如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。

     九、背景渐变

    background:linear-gradient

    background:radial-gradient

      具体解释看这一篇

     十、background-break

    控制分离元素的显示效果

  • 相关阅读:
    Fiddler抓包测试App接口
    APP测试工具之TraceView卡顿检测
    APP弱网测试
    MAT内存问题分析定位
    Android DDMS检测内存泄露
    分库分表之终极设计方案
    反向代理和正向代理
    详解HTTP协议
    Django实现websocket完成实时通讯,聊天室,在线客服等
    分布式全文检索引擎之ElasticSearch
  • 原文地址:https://www.cnblogs.com/rain-null/p/7064136.html
Copyright © 2020-2023  润新知