CSS怎么實(shí)現(xiàn)背景圖像透明

發(fā)布時(shí)間：2022-02-24 14:42:12 來(lái)源：億速云閱讀：130 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“CSS怎么實(shí)現(xiàn)背景圖像透明”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS怎么實(shí)現(xiàn)背景圖像透明”這篇文章吧。

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

　　<divclass="content">

　　<divclass="bg"></div>

　　</div>

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

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

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

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

　　.content{

　　width:450px;

　　height:300px;

　　background:#000;

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

　　}

　　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)背景圖像透明

以上是“CSS怎么實(shí)現(xiàn)背景圖像透明”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡