【HTML】
<div class="bg-color">
........
</div>
【CSS語法】
.bg-color {
background: -webkit-linear-gradient(90deg, #8a745a 0%, #8a745a 59%, #ffffff 59%, #ffffff 100%); /* for firefox */
background: -moz-linear-gradient(90deg, #8a745a 0%, #8a745a 59%, #ffffff 59%, #ffffff 100%); /* for Chrome 和 safari */
background: -o-linear-gradient(90deg, #8a745a 0%, #8a745a 59%, #ffffff 59%, #ffffff 100%); /* for Opear */
background: -ms-linear-gradient(90deg, #8a745a 0%, #8a745a 59%, #ffffff 59%, #ffffff 100%); /* for ie */
background: -moz-linear-gradient(90deg, #8a745a 0%, #8a745a 59%, #ffffff 59%, #ffffff 100%); /* for Chrome 和 safari */
background: -o-linear-gradient(90deg, #8a745a 0%, #8a745a 59%, #ffffff 59%, #ffffff 100%); /* for Opear */
background: -ms-linear-gradient(90deg, #8a745a 0%, #8a745a 59%, #ffffff 59%, #ffffff 100%); /* for ie */
}
【說明】
此方式可以設定區塊內背景色是漸層色0deg:由左至右
90deg:由上至上
【相關參考網站】
如果不想自行設定色碼,也可以到這裡查看一些設計師提供的漸層色,粉嫩系、太空系、金屬系…非常豐富。
【漸層產生器】
MagicPattern
這個網站很酷,有許多不同的背景圖,都是透過 CSS 製作的,只要在上方自行選擇顏色和透明度、間距大小,再點選複制 CSS 語法,就可以套用在自己的網站中