一篇文章帶你了解CSS Opacity(透明度)

作者：前端進階者 2020-11-27 08:51:29

開發前端

opacity CSS屬性指定元素的透明度。opacity屬性指定了一個元素的透明度。換言之，opacity屬性指定了一個元素后面的背景的被覆蓋程度。

[[354390]]

opacity CSS屬性指定元素的透明度。opacity屬性指定了一個元素的透明度。換言之，opacity屬性指定了一個元素后面的背景的被覆蓋程度。

一、跨瀏覽器透明度

現在，透明度(opacity )是CSS3規范的一部分，但是它存在了很長時間。但是，較舊的瀏覽器具有不同的方式來指定不透明度或透明度。

二、Firefox，Safari，Chrome，Opera和IE9中的CSS不透明度

當前瀏覽器中CSS不透明度的最新語法。

示例

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>CSS 透明度示例</title> 
        <style> 
            p { 
                opacity: 0.7; 
                padding: 10px; 
                background: #00ff00; 
            } 
</style> 
    </head> 
    <body style="background-color:aqua ;"> 
        <p> 
            這段文字70%不透明(或30%透明)。使用<code>opacity</code>值，看看它是如何工作的</p> 
    </body> 
</html>

解析：

上面的樣式規則將使段落元素70%不透明(或30%透明)。

opacity屬性的取值范圍為0.0到1.0。設置為opacity:?1;會使元素完全不透明(即0%透明)，opacity:?0;而使元素完全透明(即100%透明)。

Internet Explorer 8及更低版本中的CSS透明度實現方法

Internet Explorer 8和更早版本支持僅Microsoft的屬性“ alpha過濾器”來指定元素的透明度。

示例

<style> 
    p { 
        filter: alpha(opacity=50); 
        zoom: 1;  /* Fix for IE7 */ 
} 
</style>

注：

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屬性，所以在樣式表中會創建無效的代碼。

1. CSS圖像透明度

還可以使用CSS Opacity制作透明圖像。

下圖中的三個圖像均來自同一源圖像。它們之間的唯一區別是它們的透明度。

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>項目</title> 
        <style> 
            div { 
                margin-right: 20px; 
            } 
            .img01{ 
                opacity: 1; 
            } 
            .img02{ 
                opacity: 0.5; 
            } 
            .img03{ 
                opacity: 0.25; 
            } 
</style> 
    </head> 
    <body style="background-color:aqua ;"> 
        <div> 
            <div style="float: left;"> 
                <img src="img/diamond.jpg" class="img01" /> 
                <p>opacity:1</p> 
            </div> 
 
            <div style="float: left;"> 
                <img src="img/diamond.jpg" class="img02" /> 
                <p>opacity:0.5</p> 
            </div> 
            <div> 
                <img src="img/diamond.jpg" class="img03" /> 
                <p>opacity:0.25</p> 
            </div> 
        </div> 
    </body> 
</html>

運行效果：

2. 透明框中的文字

在元素上使用不透明度時，不僅元素的背景將具有透明度，而且其所有子元素也將變為透明。如果不透明度的值變高，將使透明元素內部的文本難以閱讀。

例：

div { 
    float: left; 
    opacity: 0.7; 
    border: 1px solid #949781; 
} 
p { 
    float: left; 
    position: relative; 
    margin-left: -400px; 
}

為了防止這種情況，可以使用透明的PNG圖像，也可以將文本塊放在透明框的外面，然后使用負邊距或CSS定位將其可視地推入內部。

四、總結

本文基于CSS基礎，介紹了CSS Opacity改變圖片透明度，不同的瀏覽器中的圖片透明度改變的方法。瀏覽器的兼容性，改變透明框中的文字，都通過案例的分析進行詳細的講解。

歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

代碼很簡單，希望能夠幫助你更好的學習。

本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。

責任編輯：武曉燕來源：前端進階學習交流