建站
咨詢
售后
建站咨詢
新聞中心
一、跨瀏覽器透明度
現(xiàn)在，透明度(opacity )是CSS3規(guī)范的一部分，但是它存在了很長時間。但是，較舊的瀏覽器具有不同的方式來指定不透明度或透明度。
站在用戶的角度思考問題，與客戶深入溝通，找到龍沙網(wǎng)站設(shè)計與龍沙網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋龍沙地區(qū)。
二、Firefox，Safari，Chrome，Opera和IE9中的CSS不透明度
當前瀏覽器中CSS不透明度的最新語法。
示例
CSS 透明度示例
這段文字70%不透明(或30%透明)。使用opacity值，看看它是如何工作的
這段文字70%不透明(或30%透明)。使用??opacity??值，看看它是如何工作的
解析：
上面的樣式規(guī)則將使段落元素70%不透明(或30%透明)。
opacity屬性的取值范圍為0.0到1.0。設(shè)置為opacity:?1;會使元素完全不透明(即0%透明)，opacity:?0;而使元素完全透明(即100%透明)。
Internet Explorer 8及更低版本中的CSS透明度實現(xiàn)方法
Internet Explorer 8和更早版本支持僅Microsoft的屬性“ alpha過濾器”來指定元素的透明度。
示例
注：
IE中的Alpha過濾器接受從0到值100。該值0使元素完全透明(即100%透明)，而該值100使元素完全不透明(即0%透明)。
三、兼容所有瀏覽器的CSS透明度
例：
p {
opacity: 0.5; /* Opacity for Modern Browsers */
filter: alpha(opacity=50); /* Opacity for IE8 and lower */
zoom: 1; /* Fix for IE7 */
}
警告：
包括alpha過濾器以指定Internet Explorer 8和更低版本中的透明性，因為這是僅Microsoft的屬性，而不是標準的CSS屬性，所以在樣式表中會創(chuàng)建無效的代碼。
1. CSS圖像透明度
還可以使用CSS Opacity制作透明圖像。
下圖中的三個圖像均來自同一源圖像。它們之間的唯一區(qū)別是它們的透明度。
項目
opacity:1
opacity:0.5
opacity:0.25
運行效果：
2. 透明框中的文字
在元素上使用不透明度時，不僅元素的背景將具有透明度，而且其所有子元素也將變?yōu)橥该?。如果不透明度的值變高，將使透明元素?nèi)部的文本難以閱讀。
例：
div {
float: left;
opacity: 0.7;
border: 1px solid #949781;
}
p {
float: left;
position: relative;
margin-left: -400px;
}
為了防止這種情況，可以使用透明的PNG圖像，也可以將文本塊放在透明框的外面，然后使用負邊距或CSS定位將其可視地推入內(nèi)部。
四、總結(jié)
本文基于CSS基礎(chǔ)，介紹了CSS Opacity改變圖片透明度，不同的瀏覽器中的圖片透明度改變的方法。瀏覽器的兼容性， 改變透明框中的文字，都通過案例的分析進行詳細的講解。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望能夠幫助你更好的學習。
本文轉(zhuǎn)載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進階學習交流公眾號。
新聞標題：一篇文章帶你了解CSS Opacity(透明度)
本文地址：http://www.5511xx.com/article/djhpjdp.html
