建站
咨詢
售后
建站咨詢
新聞中心
CSS 圖像透明/不透明
使用 CSS 很容易創(chuàng)建透明的圖像。
創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),慶云企業(yè)網(wǎng)站建設(shè),慶云品牌網(wǎng)站建設(shè),網(wǎng)站定制,慶云網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,慶云網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
注意：CSS Opacity 屬性是W3C 的 CSS3 建議的一部分。
實(shí)例1 - 創(chuàng)建一個(gè)透明圖像
CSS3中屬性的透明度是 opacity.
首先，我們將向您展示如何用CSS創(chuàng)建一個(gè)透明圖像。
正常的圖像
相同的圖像帶有透明度：
看看下面的CSS：
img
{ opacity:0.4; filter:alpha(opacity=40); /*IE8 及更早版本 */ }
IE9，F(xiàn)irefox，Chrome，Opera，和 Safari 瀏覽器使用透明度屬性可以將圖像變的不透明。 Opacity 屬性值從0.0 - 1.0。值越小，使得元素更加透明。
IE8和早期版本使用濾鏡：alpha（opacity= x）。 x可以采取的值是從0 - 100。較低的值，使得元素更加透明。
提示：在本站的 CSS 參考手冊中對 CSS opacity 屬性有詳細(xì)介紹。
實(shí)例
img
{ opacity:0.4; filter:alpha(opacity=40); /*IE8 及更早版本 */ }
嘗試一下 ?
實(shí)例2 - 圖像的透明度 - 懸停效果
將鼠標(biāo)移到圖像上：
CSS樣式：
img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及更早版本 */ }
第一個(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í)例
img:hover
{ opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */}
嘗試一下 ?
實(shí)例3 - 透明的盒子中的文字
這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。這些文本在透明框里。
首先，我們創(chuàng)建一個(gè)固定的高度和寬度的div元素，帶有一個(gè)背景圖片和邊框。然后我們在第一個(gè) div 內(nèi)部創(chuàng)建一個(gè)較小的 div 元素。 這個(gè) div 也有一個(gè)固定的寬度，背景顏色，邊框 - 而且它是透明的。透明的 div 里面，我們在 P 元素內(nèi)部添加一些文本。
實(shí)例
div .background
{ width:500px;height:250px;border:2px solid black;
background:url(https://atts.w3cschool.cn/attachments/image/20200818/1597713899949694.jpg) repeat;
}
嘗試一下 ?
新聞標(biāo)題：創(chuàng)新互聯(lián)CSS教程：CSS圖像透明/不透明
標(biāo)題路徑：http://www.dlmjj.cn/article/djcgdjc.html
