背景样式笔记

背景:
背景颜色 background-color
背景图像 background:背景颜色 url(背景图像的路径) 水平定位 垂直定位 是否重复;
是否重复:repeat-x 水平重复 repeat-y 垂直重复 repeat 全部重复(默认) no-repeat 不重复
水平定位 left|right|center|具体的像素值 垂直定位top|bottom|center|具体的像素值

背景图像大小 background-size:宽 高; css3新增
cover填满整个的区域 (拉伸变形)
contain 维持宽高比比例

渐变色(css3新增的,兼容性问题)
1、线性渐变
background:linear-gradient(方向,颜色1,颜色2,……);
background: -webkit-linear-gradient(方向,颜色1,颜色2,……);
background: -moz-linear-gradient(方向,颜色1,颜色2,……);
2、径向渐变

兼容性问题:
每个浏览器都有自己的内核
欧朋 opera -o-
火狐 firefox -moz-
苹果浏览器和谷歌浏览器 -webkit-
微软的浏览器ie -ms-

解决方案:
在相应有兼容性问题的样式属性前加上对应的浏览器的前缀

上一篇:背景图片的设置


下一篇:CSS(8)背景图像及渐变