2015
09-06

CSS 圖像透明/不透明

清華大佬耗費(fèi)三個(gè)月吐血整理的幾百G的資源，免費(fèi)分享！....>>>

CSS 圖像透明/不透明

使用CSS很容易創(chuàng)建透明的圖像。

注意：CSS Opacity屬性是W3C的CSS3建議的一部分。

Examples

更多實(shí)例

創(chuàng)建透明圖像 - 懸停效果

創(chuàng)建一個(gè)具有文本的擁有背景圖像的透明框

實(shí)例1 - 創(chuàng)建一個(gè)透明圖像

CSS3中屬性的透明度是 opacity.

首先，我們將向您展示如何用CSS創(chuàng)建一個(gè)透明圖像。

正常的圖像

klematis

相同的圖像帶有透明度：

klematis

看看下面的CSS：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9，F(xiàn)irefox，Chrome，Opera，和Safari瀏覽器使用透明度屬性可以將圖像變的不透明。 Opacity屬性值從0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用濾鏡：alpha（opacity= x）。 x可以采取的值是從0 - 100。較低的值，使得元素更加透明。

實(shí)例2 - 圖像的透明度 - 懸停效果

將鼠標(biāo)移到圖像上：

klematisklematis

CSS樣式：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

第一個(gè)CSS塊是和例1中的代碼類似。此外，我們還增加了當(dāng)用戶將鼠標(biāo)懸停在其中一個(gè)圖像上時(shí)發(fā)生什么。在這種情況下，當(dāng)用戶將鼠標(biāo)懸停在圖像上時(shí)，我們希望圖片是清晰的。

此CSS是：opacity=1.

IE8和更早版本使用： filter:alpha(opacity=100).

當(dāng)鼠標(biāo)指針遠(yuǎn)離圖像時(shí)，圖像將重新具有透明度。

實(shí)例3 - 透明的盒子中的文字

這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。

掃碼二維碼 獲取免費(fèi)視頻學(xué)習(xí)資料

編程學(xué)習(xí)