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

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

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

首先，我們來(lái)看一下HTML代碼

蒲公英

.bg是一個(gè)空div，“蒲公英”寫(xiě)在它之外。

也就是說(shuō)，下面將利用position屬性將“蒲公英”放在圖像的上面，我們來(lái)看具體的代碼實(shí)例

首先，給出相對(duì)位置(position：relative;)到.content。

為了更容易理解背景透明，我們先給一個(gè)黑色的背景.content{

width: 450px;

height: 300px;

background: #000;

position: relative; /*相對(duì)位置*/

}

p{

color: #fff;

font-weight: bold;

text-align: center;

}

效果如下：

接下來(lái)，我們來(lái)設(shè)置.bg

將width和height設(shè)置為100％并將position設(shè)置為絕對(duì)位置放在左上(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;

}

效果如下：

實(shí)際上，字符位于透明圖像下方。

所以，比起固定在絕對(duì)位置的背景圖像，p的內(nèi)容必須要在前面。

因此，p也可以通過(guò)給予position：absolute；給它堆疊順序。(因?yàn)樗幻枋鰹閜osition：absolute;，還可以使用z-index來(lái)操縱堆疊順序。)

最后我們將文字移到中間位置p{

width: 100%;

height: 1.5em;

color: #fff;

font-weight: bold;

text-align: center;

position: absolute;

margin: auto;

top: 0;

bottom: 0;

}

效果如下：

總結(jié)

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

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