這篇文章給大家分享的是有關(guān)如何通過CSS創(chuàng)建透明圖像的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),容城企業(yè)網(wǎng)站建設(shè),容城品牌網(wǎng)站建設(shè),網(wǎng)站定制,容城網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,容城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

實例 1 - 創(chuàng)建透明圖像

定義透明效果的 CSS3 屬性是 opacity。

首先，我們將展示如何通過 CSS 來創(chuàng)建透明圖像。

常規(guī)圖像：

帶有透明度的相同圖像：

請看下面的 CSS：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設(shè)定透明度。opacity 屬性能夠設(shè)置的值從 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。

實例 2 - 圖像透明度 - Hover 效果

請把鼠標(biāo)指針移動到圖像上：

CSS 是這樣的：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 針對 IE8 以及更早的版本 */
}

第一個 CSS 代碼塊類似實例 1 中的代碼。此外，我們已經(jīng)設(shè)置了當(dāng)鼠標(biāo)指針位于圖像上時的樣式。在這個例子中，當(dāng)指針移動到圖像上時，我們希望圖像是不透明的。

對應(yīng)的 CSS 是：opacity=1。

IE8 以及更早的瀏覽器：filter:alpha(opacity=100)。

當(dāng)鼠標(biāo)指針移出圖像后，圖像會再次透明。

實例 3 - 透明框中的文本

This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.

源代碼是這樣的：

This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.