CSS如何實現背景圖像透明

CSS如何實現背景圖像透明？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

 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如何實現背景圖像透明問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。