CSS半透明效果的屬性和場景

NoraXie 發布于2019-08-30 15:53 / 2400人閱讀

摘要：在中與半透明效果相關的屬性有兩個和。屬性的值規定透明度。以及更早的版本支持替代的屬性。接下來通過場景來描述半透明效果的實現。圖片出現半透明效果，如果將文字設置為白色，文字的半透明效果會很小。

在CSS中與半透明效果相關的屬性有兩個：opacity和rgba。
opacity屬性的值規定透明度。從 0.0 （完全透明）到 1.0（完全不透明）。設置opacity元素的所有后代元素會隨著一起具有透明性，一般用于調整圖片或者模塊的整體不透明度。IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。
rgba用于設置顏色的透明度，參數是rgba(red, green, blue, alpha) alpha的取值從 0（完全透明）到 1（完全不透明），如rgba(255,255,255,0.8)。
接下來通過場景來描述半透明效果的實現。

1.鼠標懸浮在圖片上，圖片變半透明。做法是給圖片添加一個偽類，修改opacity

.image:hover{
    opacity:0.5;
}

2.圖片下部分是半透明的盒子，盒子內有描述性的文字。


    小指頭

.rgba{
    position:relative;
    width: 300px;
    height: 200px;
    margin: 20px;
    color:rgb(200,140,50);
    background-image: url("finger.jpg");
    text-align: center;
    cursor:pointer;
}
.bottom{
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    line-height:30px;
    background-color: rgba(200,200,200,0.4);  //設置顏色的半透明效果
}

3.圖片下部有文字，鼠標懸浮在圖片上，圖片變模糊，文字不受影響。外面一個盒子，里面有兩個盒子，分別放圖片和文字，圖片的下外邊距為負值，文字就蓋在圖片上。圖片和文字不在同一個盒子內，所以改變圖片的opacity不會影響文字。


    
    小指頭

.image1{
    position:relative;
    width: 300px;
    height: 200px;
    margin-bottom: -20px;
    color:rgb(200,140,50);
    background-image: url("finger.jpg");
    text-align: center;
    cursor:pointer;
}
.image1:hover{
    opacity:0.6;
}
.text1{
    display:block;
    position:absolute;
    bottom:0;
    width:300px;
    height: 20px;
    color:red;
    text-align: center;
    cursor:pointer;
}

4.鼠標懸浮在圖片上，圖片上出現垂直水平居中的文字，文字是通過偽元素添加的。圖片出現半透明效果，如果將文字設置為白色，文字的半透明效果會很小。它的好處就是只需要寫一個div。


.image2{
    position:relative;
    width: 300px;
    height: 200px;
    margin:20px;
    text-align: center;
    background-image: url("finger.jpg");
    cursor:pointer;
}
.image2:hover{
    opacity:0.8;
}
.image2:hover:after{
    content:"小指頭";
    display:inline-block;
    font-size:25px;
    height:200px;
    line-height:200px;
    color:#fff;
}

5.電商網站上（如天貓）和新聞網站上（如好奇心研究所）上有需要出現半透明效果的地方。大多數是采用如下兩種結構：


    
    這是一些文字

.href{
    display:inline-block;
    width:250px;
    height:400px;
    margin:20px;
    text-decoration: none;
    color:#000;
}

用a標簽包裹著圖片標簽和存放文字的盒子，此時的a標簽表現為塊級元素，a標簽的寬度和高度均大于圖片的寬度和高度。當鼠標懸浮到a標簽上，a標簽內的圖片會加上半透明效果，筆者并未找到實現這樣效果的css，猜想可能是由JS實現，若筆者猜想有誤，還請觀者指正。
或者是這樣的結構：

在父盒子里面放兩個絕對定位的子盒子，一個放圖片，一個放文字，放文字的盒子是個表現為塊狀元素的a標簽，將背景色設置為了半透明顏色，筆者猜想是父盒子響應了鼠標懸浮事件，然后修改a標簽的visibility屬性。

一個父盒子的opacity會影響子盒子，opacity也大多是用于圖片上，而rgba是用于顏色上。而opacity這個屬性還具有更有意思的地方，那就是創建層疊上下文，這個筆者會在下篇文章《細說opacity和層疊上下文》中分析。

GPU云服務器云服務器半透明效果半透明半透明度 html標簽半透明

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116614.html

聊聊網頁中的圖片

摘要：使用的場景多為頁面內容的圖片，較大的頭圖，顏色過多的圖片。就是頁面中的背景，并不是內容，修飾作用。 warn: 這是一篇沒有一張圖片的講圖片的文章 1. 圖片格式通常在網頁中使用的圖片有三種格式，jpg，png和gif。jpg是有損壓縮格式，就算你在ps里用100%質量保存，保存多次會產生質量損失，而png和gif則不會。因此如果開發者相對圖片進行微處理，改動jpg不是明智的選擇。p...

Meathill 2019-08-28 18:18 評論0 收藏0
聊聊網頁中的圖片

摘要：使用的場景多為頁面內容的圖片，較大的頭圖，顏色過多的圖片。就是頁面中的背景，并不是內容，修飾作用。 warn: 這是一篇沒有一張圖片的講圖片的文章 1. 圖片格式通常在網頁中使用的圖片有三種格式，jpg，png和gif。jpg是有損壓縮格式，就算你在ps里用100%質量保存，保存多次會產生質量損失，而png和gif則不會。因此如果開發者相對圖片進行微處理，改動jpg不是明智的選擇。p...

Vultr 2019-08-01 14:54 評論0 收藏0
CSS背景與邊框

摘要：背景與邊框半透明邊框背景知識顏色在里我們可以使用和兩種色彩模式，二者均可以用來在設置顏色的同時指定其它透明度。解決方案需要知道的是，在默認情況下，背景會延伸到邊框所在區域的下層。 title: 背景與邊框 date: 2016-10-16 tags: CSS Secrets 0x00 半透明邊框背景知識 RGBA/HSLA 顏色在CSS3里我們可以使用RGBA和...

wanghui 2019-08-30 13:15 評論0 收藏0
CSS揭秘之《制作半透明邊框》

摘要：默認狀態下，背景會延伸到邊框的區域下層可以通過屬性來調整上述默認行為所帶來的不便這個屬性的初始值是，意味著背景會被元素的邊框的外沿框裁切掉實現半透明邊框代碼如下通過設置通道然后具體效果見鏈接 1、默認狀態下，背景會延伸到邊框的區域下層2、可以通過 background-clip 屬性來調整上述默認行為所帶來的不便；這個屬性的初始值是 border-box，意味著背景會被元素的 bor...

Berwin 2019-08-20 19:08 評論0 收藏0