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中文網其他相關文章!