CSS如何實(shí)現(xiàn)背景圖像透明？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),土默特右旗企業(yè)網(wǎng)站建設(shè),土默特右旗品牌網(wǎng)站建設(shè),網(wǎng)站定制,土默特右旗網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,土默特右旗網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

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

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

<div class="content">
    <div class="bg"></div>
    <p>蒲公英</p>
</div>

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

也就是說，下面將利用position屬性將“蒲公英”放在圖像的上面，我們來看具體的代碼實(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;
}

效果如下：

接下來，我們來設(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也可以通過給予position：absolute；給它堆疊順序。（因?yàn)樗幻枋鰹閜osition：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;
}

效果如下：

關(guān)于CSS如何實(shí)現(xiàn)背景圖像透明問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

當(dāng)前標(biāo)題：CSS如何實(shí)現(xiàn)背景圖像透明
標(biāo)題URL：http://chinadenli.net/article2/jiihoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、企業(yè)建站、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)建站、電子商務(wù)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)