CSS實現背景圖像透明需要用到的屬性是opacity屬性，但是在有文字的情況下，為了防止文字透明我們需要將元素分開。
CSS中實現背景圖像透明的屬性是opacity屬性，但是，如果你使用它來創建帶有文本的內容的話，你就會發現文本內容也會隨著透明。
現在，我們先來寫一個只是背景圖片透明的CSS。
首先，我們來看看HTML程式碼
<div class="content">
<div class="bg"></div>
<p>蒲公英</p>
</div>.bg是一個空div，「蒲公英」寫在它之外。
也就是說，以下將利用position屬性將「蒲公英」放在圖像的上面，我們來看具體的程式碼實例
首先，給出相對位置（position：relative;）到.content。
為了更容易理解背景透明，我們先給一個黑色的背景
.content{
width: 450px;
height: 300px;
background: #000;
position: relative; /*相对位置*/
}
p{
color: #fff;
font-weight: bold;
text-align: center;
} 效果如下：
接下來，我們來設定.bg
將width和height設定為100％並將position設定為絕對位置放在左上（left:0; top: 0;）。
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url(img/pugongying.jpg);
background-size: cover;
opacity: 0.5;
}效果如下：
實際上，字元位於透明影像下方。
所以，比起固定在絕對位置的背景圖像，p的內容必須在前面。
因此，p也可以透過給予position：absolute；給它堆疊順序。 （因為它被描述為position：absolute;，也可以使用z-index來操縱堆疊順序。）
最後我們將文字移到中間位置
p{
width: 100%;
height: 1.5em;
color: #fff;
font-weight: bold;
text-align: center;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
}效果如下：
以上是如何使用CSS實現背景影像透明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
