在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和層疊上下文》中分析。

總結

以上是生活随笔為你收集整理的html中半透明效果,CSS半透明效果的属性和场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。