• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • background

    background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括color,image,originsize,repeat方式等等。

    此属性是一个简写属性,可以在一次声明中定义一个或多个属性:background-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size,和background-attachment

    对于所有简写属性,任何没有被指定的值都会被设定为它们的初始值。

    示例

    /* 使用  */
    background: green;
    
    /* 使用  */
    background: url("test.jpg") repeat-y;
    
    /* 使用  */
    background: border-box red;
    
    /* 将背景设为一张居中放大的图片 */
    background: no-repeat center/80% url("../img/image.png");
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持background

    语法:

    background:<background-image>| <background-position>| <background-size>| <background-repeat>| <background-attachment>| <background-origin>| <background-clip>| <background-color>

    下面的一个或多个值,可以按任意顺序放置:

    • <background-image>:指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”。参见background-image
    • <background-position>:指定对象的背景图像位置。参见background-position
    • <background-size>:指定对象的背景图像的尺寸大小。参见background-size
    • <background-repeat>:指定对象的背景图像如何铺排填充。参见background-repeat
    • <background-attachment>:指定对象的背景图像是随对象内容滚动还是固定的。参见background-attachment
    • <background-origin>:指定对象的背景图像显示的原点。参见background-clipbackground-origin
    • <background-color>:指定对象的背景颜色。参见background-color
    默认值看每个独立属性
    适用于所有元素
    继承性
    动画性看每个独立属性
    计算值看每个独立属性

    说明:

    复合属性。检索或设置对象的背景特性(背景色<background-color>不能设置多组)。

    • 一个元素可以设置多重背景图像。每组属性间使用逗号分隔。
    • 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上。

    示例:假设要在同一个元素上定义3个背景图像。缩写方式:

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px content-box padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px content-box padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px content-box padding-box #aaa;
    

    注意,<background-color>只能设置一次,且由于写在前面的背景会叠在之后的背景之上,所以背景色通常都定义在最后一组上,避免背景色将图像盖住。

    拆分方式:

    background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-attachment:scroll,scroll,scroll;
    background-position:10px 20px,10px 20px,10px 20px;
    background-size:50px 60px,70px 90px,110px 130px;
    background-origin:content-box,content-box,content-box;
    background-clip:padding-box,padding-box,padding-box;
    background-color:#aaa;
    

    如果定义了多个背景图片,而其他属性只有一个参数值,则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写

    background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:10px 20px;
    background-size:50px 60px,70px 90px,110px 130px;
    background-origin:content-box;
    background-clip:padding-box;
    background-color:#aaa;
    

    如果定义了多个背景图片,而<background-origin>和<background-clip>设置了相同的值。可这样缩写

    background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
    	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;
    

    例子

    //HTML
    <p class="topbanner">
      starry sky<br/>
      twinkle twinkle<br/>
      starry sky
    </p>
    <p class="warning">here is a paragraph<p>
    
    //CSS
    .warning { 
      background: red; 
    }
    
    .topbanner { 
      background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; 
    }
    

    下篇:background-color