background-size: 100% 100%;会按照容器比例撑满,会导致图片变形
background-size: 100% 100%;
background-size:cover; 把背景图片放大到合适元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会被裁掉
/* 背景图 url 网络资源地址 后面写图片地址 要与变换后的一同使用*/ 在下方设置图片时 用 em标签
变换前:
.cart em{
background-image: url( 2.png);
}
变换后:
.cart:hover em{
background-image: url(1.png);
}
/* 背景图尺寸 */
background-size: 100% 100%;
vertical-align: middle; (middle 中间) 将图片设置到中间位置
/*背景图位置*/
background-position: center(中心) center(中心); (x,y)
background-image: url();
/* 背景平铺 */
background-repeat: no-repeat;
/* 居中 */
background-position: center center;
background-repeat:no-repeat ; /*背景图平铺或不平铺 */
background-position: center bottom; 背景图位置
1. 背景属性 可以设置背景颜色 背景图 背景平铺 背景图像固定等等
background-image 用来描述元素的背景图像 实际开发过程中常用于logo 或者小的一些装饰图像或者超大的背景图像
/* background-repeat: ;属性设置是否及如何重复背景图像 */
/* no-repeat 背景图像将仅显示一次 */
沿x轴平铺图像
background-repeat: repeat-x;
沿y轴平铺图像
background-repeat: repeat-y;
2.background-position:x y; 利用背景图像属性可以改变图片在背景中的位置 x y 可以是数字(具体数值)也可以是方位名词
background-position: top center; 只有一个方位名词时另一个则默认居中
1.参数是方位名词 若指定两个都是方位名词那么前后顺序没有影响
2.如果只指定一个方位名词另外一个省略,则省略的值为居中对齐
3. 指定具体数值,严格按照x y的数值来定
3. 背景图固定
background-attachment: ; 设置背景图片是否固定或者随着页面的滚动而滚动 scroll为默认值 随内容的滚动而滚动 fixed 固定位置 不会随内容滚动而滚动
background-attachment:fixed ;/*固定背景图*/
4.背景图像复合写法 (简化代码,优化代码量)
一般约定的顺序:(可以不按顺序)
background: 背景颜色 背景图像的路径 背景是否平铺 背景是否滚动 背景图像位置;
可以不按顺序写(浏览器功能强大依然能实现):
background: red url(背景图.jpg) no-repeat top center fixed;