定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:background-color | 背景颜色
background-position | 背景图片位置
background-size | 背景图片大小
background-repeat | 背景图片重复填充
background-origin | background-position属性应该是相对位置。
background-clip | 背景的绘制区域
background-attachment | 背景图片是否滚动
background-image | 背景图片
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
属性详解:
background-attachment
--------设置背景图像是否固定或者随着页面的其余部分滚动。
属性值:
background-attachment:fixed
实例
如何指定一个固定的背景图像:
图片地址,不重复,固定
background-blend-mode
--------属性定义了背景层的混合模式(图片与颜色)。
属性值:
background-blend-mode:lighten
实例
div背景为滤色模式
background-blend-mode:screen(滤色模式)
滤色模式效果
background-clip
--------属性指定背景绘制区域。
属性值:
background-clip:padding-box
实例
指定绘图区的背景:
background-clip:content-box
效果
background-color
--------设置一个元素的背景颜色。
属性值:
background-color:yellow
实例
设置部分文字的背景颜色
background-color:yellow
效果
background-image
--------设置一个元素的背景图像。
属性值:
background-image:url(1.png)
实例
多个背景图片
url,origin,clip,size
效果
background-origin
------指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是"固定",这个属性没有任何效果。
属性值:
background-origin:border-box
实例
内容框相对定位的背景图片:
border-box,content-box
边框,内容框
background-position
--------设置背景图像的起始位置。
属性值:
background-postion:center right;
实例
如何定位background-image:
background-postion:center
效果
background-repeat
--------设置如何平铺对象的 background-image 属性。
属性值:
background-repeat:no-repeat
实例
如何在水平方向重复背景图像。
水平方向重复
效果
background-size
--------指定背景图片大小。
属性值:
background-size:3px 5px;
实例
拉伸背景图像完全覆盖内容面积。
100%
效果