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

CSS中實現(xiàn)背景圖像透明的屬性是opacity屬性，但是，如果你使用它來創(chuàng)建帶有文本的內容的話，你就會發(fā)現(xiàn)文本內容也會隨著透明。

現(xiàn)在，我們先來編寫一個只是背景圖像透明的CSS。

首先，我們來看一下HTML代碼

蒲公英

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

}

效果如下：

總結

以上是生活随笔為你收集整理的html图片怎么弄透明背景,如何使用CSS实现背景图像透明的全部內容，希望文章能夠幫你解決所遇到的問題。

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