background 背景图铺满界面...
1.背景图铺满界面
background的场景
<body background="/image/1.png" style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;" ></body>
2.linear-gradient 和 webkit-linear-gradient的区别
语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
通常只需要linear-gradient,兼容性较好。但iphone5的ios6系统下,linear-gradient不识别,需要加上-webkit-linear-gradient。
用法:
linear-gradient和-webkit-linear-gradient的用法是有很大区别的,千万别以为只是多了一个-webkit。
主要是第一个参数direction。前者需要使用“to bottom”,而后者是“bottom”,不能加“to”:
.im-item .im-mask {
background:linear-gradient(bottom, rgba(0,0,0,0.18), rgba(0,0,0,0.6));
}
使用角度时也不一样,前者0deg表示从下到上,而后者0deg表示从左到右。如:
background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
如果第一个参数省略,那么两者都表示从上到下,这点倒是相同:
background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.9));
博客园地址:https://www.cnblogs.com/lixiuming521125/