網頁中的 CSS 元素透明法打賞

1、HTML 元素透明

其實本身,CSS 實現元素透明是件容易事兒。直接上代碼:

opacity:.5

opacity 指的是不透明度,取值為 0~1 之間,1 表示完全不透明,0 表示完全透明。

A 級瀏覽器基本都支持 opacity 屬性,但碰上 IE,總沒好事。不過 IE 有濾鏡,可以幫助我們拐彎抹角地搞定不透明度:

filter:alpha(opacity=50);

注:事實上會碰到透明背景層,而 opacity 屬性是會繼承的,避免這個問題,需要結合定位來實現。

在 CSS3 中,還可以使用 HSLA(色調、飽和、亮度、透明度)或者 RGBA(紅、綠、藍、透明度)來實現元素透明。例如:

background: hsla(0,100%,50%,0.5);
background: rgba(0,0,0,0.5);

2、背景圖片透明

有一個值得關注的問題是,PNG8 格式的圖片在 IE6 下僅支持全透明,也就是說,IE6 下使用 PNG8 無法實現背景的半透明效果。透不透明其實有時候無所謂,但問題是全透明狀態下,會導致圖片出現惡心的毛邊。雖然可以在導出 PNG8 時,通過選擇雜邊顏色或者去除雜邊的方式解決,但并不完美。

可喜的是,PNG24 支持全透明,所以 PNG24 就很威猛了,在圖片透明的方案中,它絕對是武力指數最高的。

但碰上 IE,另一個惡心的問題又出現了,IE6 不支持支持半透明的 PNG24 透明圖片(可能有點拗口)。

咋辦?濾鏡!

直接上代碼:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mangguo.png',sizingMethod='crop');

但碰上 IE6,又悲劇了。在 CSS 文檔和頁面地址不一致時(比如很多網站會將靜態資源放置于和站點本身不同域的 CDN 服務器上),會導致濾鏡引用的圖片不可獲取。所以一旦資源跨域,必須保證圖片地址為絕對路徑

網頁中的 CSS 元素透明法
文章《網頁中的 CSS 元素透明法》二維碼
  • 微信打賞
  • 支付寶打賞

暫無評論

(必填)

(必填)

(可選)

黑龙江22选5开奖