文章 / 資源

網站設計資源分享
2019-07-20 CSS技巧

強大的CSS背景漸層

強大的CSS背景漸層

以前說到網頁背景透明背景漸層就一定要用png pattern,如果客戶刁鑽要改漸層樣是或是透明度,真的讓人很抓狂,現在CSS3可以讓你輕鬆完成!

[使用方式]
#grad {
  background-image: linear-gradient(red, yellow);
}
#grad {
  background-image: linear-gradient(red, yellow, green);
}
[使用方式]設定方向
#grad {
  background-image: linear-gradient(to right, red , yellow);
}
#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}
[使用方式]RGBA
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

更多的CSS參數設定請參考https://www.w3schools.com/css/css3_gradients.asp

網站架設

WIIN快速建站 - 提供多種響應式企業版型,全站內容都可由後台管理 (公司簡介/最新消息/產品介紹/聯絡我們...等),還可自行新增獨立頁面!

本服務亦堤共客製化模板套用,設計稿切版製作,歡迎 設計公司 / 廣告行銷公司 / 活動公關公司 合作。

了解詳情