background 背景圖鋪滿界面...

2022-09-29 14:24:08

1.背景圖鋪滿界面

background的場景

<body background="/image/1.png" style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;" ></body>

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));