首頁 >web前端 >css教學 >如何使用CSS實現背景影像透明

如何使用CSS實現背景影像透明

不言
不言原創
2018-11-28 11:10:344431瀏覽

CSS實現背景圖像透明需要用到的屬性是opacity屬性,但是在有文字的情況下,為了防止文字透明我們需要將元素分開。

如何使用CSS實現背景影像透明

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;
}

效果如下:

如何使用CSS實現背景影像透明

接下來,我們來設定.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;
}

效果如下:

如何使用CSS實現背景影像透明

實際上,字元位於透明影像下方。

所以,比起固定在絕對位置的背景圖像,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實現背景影像透明


以上是如何使用CSS實現背景影像透明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn