這篇文章主要為大家展示了“CSS怎么實現背景圖像透明”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS怎么實現背景圖像透明”這篇文章吧。
首先，我們來看一下HTML代碼
<divclass="content">
<divclass="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;
}
以上是“CSS怎么實現背景圖像透明”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
