background 给元素添加背景属性, 是一个简写属性, 在一个声明中设置所有的背景属性。
简写
div { ??background: skyblue url(bgimage.gif) no-repeat fixed top; ?}所有浏览器都支持 background 属性 且不可继承。
IE8 以及以下的浏览器不支持一个元素多设置个背景图像。
可以设置如下属性：
background-color ??????????//设置元素的背景色。background-repeat ?????????//设置背景图像是否平铺background-attachment ?????//背景图像是否固定或者随着页面的其余部分滚动。background-image ??????????//设置背景图像。background-origin ?????????//设置背景图片的定位区域。background-clip ???????????//设置背景的绘制区域。background-position ???????//设置背景图像的位置。background-size ???????????//设置背景图片的尺寸。
background-color
元素的背景颜色取值和 color 类似
可以用以 # 开头的16进制颜色码 #FFB6C1 表示 也可用英文颜色单词关键字 red black 表示 还个用 CSS3中的新特性 rgba(255,255,0) 来表示 ;
如:
div { ?background:#FFF; ??}background-image
要把图像放入背景，属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
如:
div { background-image: url("图像的路径"); // ./ 为当前路径 ???./../为上一层路径 }background-position
背景图像的位置 有两个参数 第一个参数为横轴X ,第二个参数为 纵轴Y
提供以下3类取值:
- 关键字: top、bottom、left、right 和 center。
- 长度值: 100px, 5cm,1 rem,1pt 等。
- 使用百分数值 :50% ,20% 等。
关键字
通常成对出现 默认为 left top ;
如:
div ?{
background-image:url("ssss"); ???background-repeat:no-repeat; ???background-position:right bottom; //使图像放置在元素内边距区的右下角。 如果只写一个参数, 那么第二个参数默认为center。 ?}长度值
元素内边距区左上角的偏移,偏移点是图像的左上角。
如:
div ?{
background-image:url("ssss"); ???background-repeat:no-repeat; ???background-position:right bottom; //图像的左上角将在元素内边距区左上角向右 100 像素、向下 100 像素的位置上。}
百分数值
适当放置图像
如:
body ?{ ????background-image:url(‘ssss‘); ???background-repeat:no-repeat; ???background-position:50% 50%; //使图像中心点和元素中心点对齐居中 如果只写一个参数,那么第二个参数默认 50%}
background-repeat
在页面上对背景图像进行平铺
提供有以下4种值:
- repeat-x :图像只在水平方向上重复
- repeat-y :图像只在垂直方向上重复
- no-repeat: 不允许图像在任何方向上平铺
- 默认任何方向上平铺
如:
div ?{ ??background-image: url("sss"); ?background-repeat: repeat-x; //图像只在水平方向平铺 ?}background-attachment
只提供2种值:
属性的默认值是 scroll，在默认的情况下，背景会随文档滚动。
fixed 防止这种滚动,不会受到滚动的影响
如:
div ?{ ?background-image:url("sss"); ?background-repeat:no-repeat; ?background-attachment:fixed //固定图像 ?}CSS3 背景新特性
background-size
设置背景图像的高度和宽度 第一个参数为 图像宽度,第二个为图像高度 可能会使图像拉伸变形。
提供以下四种取值:
- 长度值: px , pt 等
- 百分数值: 30% 30%
- cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域, 背景图像的某些部分也许无法显示在背景定位区域中 。
- contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 。
如:
div{background-image:url("sss");background-repeat:no-repeat;background-size:cover; //完全覆盖背景区域}background-origin
属性规定 background-position 属性相对于什么位置来定位。
如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
提供的值有:
- padding-box :背景图像相对于内边距来定位。
border-box :背景图像相对于边框盒来定位。
content-box :背景图像相对于内容来定位。
如:
div{padding:20px;border:20px dotted red;background-image:url("sss");background-origin:padding-box; //相对于内边距来定位background-repeat:no-repeat;}background-clip
图像裁剪区域
提供的值和origin 属性类似 请参考 background-origin
可配合 size 和 position 属性使用
CSS background 属性
原文地址：https://www.cnblogs.com/gaoguowen/p/8540450.html