這篇文章主要為大家展示了“CSS怎么實(shí)現(xiàn)背景圖像透明”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS怎么實(shí)現(xiàn)背景圖像透明”這篇文章吧。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都網(wǎng)站制作、東鄉(xiāng)族網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開(kāi)發(fā)、東鄉(xiāng)族網(wǎng)絡(luò)營(yíng)銷、東鄉(xiāng)族企業(yè)策劃、東鄉(xiāng)族品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供東鄉(xiāng)族建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
首先，我們來(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;
}
以上是“CSS怎么實(shí)現(xiàn)背景圖像透明”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
