使用css3背景漸變中的透明度來設置不同顏色的背景漸變

2024-07-11 08:31:20

字體：大中小

來源：轉載

供稿：網友

項目最近這幾天正在做不同主題的顏色配置方案，要根據用戶輸入的顏色來配置整個主題的顏色，讓人頭疼的是，其中一個主題所有的列表頭部背景色都是2到3組漸變值的線性漸變，也就是說，要根據用戶輸入的顏色值生成不同的但相似度很近的漸變顏色。我上網查了些資料，現在也有js支持根據你輸入的網頁內容自動填充漸變色，但是對于我這種js不是很好的人來說，還是想從css3上找點方法出來。

我發現css3的背景漸變中的透明度可以解決這個問題（前提是背景漸變的顏色是相近的）。

我在這里簡單說一下css3背景漸變中的線性漸變。線性漸變的一般結構是：

復制代碼

代碼如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

其中各個瀏覽器渲染不同，又分為：

Webkit:

復制代碼

代碼如下:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

漸變類型 - 在屬性里-webkit-linear-gradient
漸變從哪開始(top)
顏色取值和在漸變中的位置 (rgba(0,0,0,0.1) 40%)

下面的寫法是用于safari舊版本的

復制代碼

代碼如下:
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));

漸變類型 (linear)
漸變開始的X Y 軸坐標(0 0 或者left-top)
漸變結束的X Y 軸坐標(0 100% 或者left-bottom)
顏色取值 (color-stop(40%, rgba(0,0,0,0.1)))

Mozilla:

復制代碼

代碼如下:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

Firefox渲染漸變的寫法和Safari大致相同，不同的是需要將漸變屬性改為-moz-linear-gradient

Opera:

復制代碼

代碼如下:
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);

按照上面的寫法，讓Opera瀏覽器渲染直接將屬性改為-o-linear-gradient，是不是很簡單？

IE:

IE比較頑固，不支持漸變，但是提供了漸變濾鏡

復制代碼

代碼如下:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');

上一篇：讓你的HTML5&amp;CSS3網站在微軟的瀏覽器中也能運行

下一篇：使用條件注釋判斷 IE 瀏覽器版本適用于IE5.0及以上版本

發表評論