HTML如何設(shè)置div背景圖片的的透明度

這樣一個(gè)需求，就是在一個(gè)DIV中包含有一個(gè)Image標(biāo)簽，但是在Div標(biāo)簽中包含有一張背景圖片，設(shè)計(jì)圖上的樣子是這張背景圖片是有一個(gè)透明度的，但是如果直接使用opacity屬性設(shè)置的的話就會(huì)連Div中的內(nèi)容的透明度也會(huì)受到影響，那么我們?nèi)绾卧贖TML中設(shè)置div背景圖片的透明度呢？，可以通過(guò)以下幾種方法實(shí)現(xiàn)。

方法一：使用偽元素

這是在日常開發(fā)中被推薦使用的方法，通過(guò)這種方式實(shí)現(xiàn)不會(huì)影響到div中的其他內(nèi)容的透明度只會(huì)影響它自己背景的透明度，詳細(xì)實(shí)現(xiàn)如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 調(diào)整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            這里是內(nèi)容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時(shí)候，結(jié)果實(shí)在是不盡人意。所以還是選擇了上面的推薦方法，不過(guò)這種方式要比上面的那種方式實(shí)現(xiàn)起來(lái)要簡(jiǎn)單很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內(nèi)容
    </div>
</body>
</html>

方法三：使用CSS濾鏡

這種方式實(shí)現(xiàn)會(huì)影響到整個(gè)的div的樣式，也就是說(shuō)頁(yè)面中的內(nèi)容的透明度也會(huì)受到影響，并且這種影響不會(huì)被其他樣式所改變。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 調(diào)整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內(nèi)容
    </div>
</body>
</html>

以上就是實(shí)現(xiàn)如何調(diào)整div的背景透明度，在一些特殊場(chǎng)景中我們還可以通過(guò)JS的方式來(lái)實(shí)現(xiàn)。上面的方法中，推薦使用的是偽元素方法，因?yàn)樗谛薷牧薲iv背景透明度之后，并不會(huì)影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對(duì)于一些單色調(diào)的內(nèi)容來(lái)講這種方式實(shí)現(xiàn)效果不是太好。通過(guò)CSS過(guò)濾樣式，雖然是最直接的方式，但是如果在div內(nèi)部有內(nèi)容的情況下會(huì)影響到整個(gè)組件體系的樣式。

在實(shí)際開發(fā)中，我們可以選擇合適的方式來(lái)實(shí)現(xiàn)這個(gè)需求。當(dāng)然還有其他的實(shí)現(xiàn)方式，有興趣的讀者可以留言我們一起討論。

html頁(yè)面，顯示的內(nèi)容太多，會(huì)影響用戶體驗(yàn)，如果有一些，點(diǎn)擊才出現(xiàn)的內(nèi)容，就可以減少內(nèi)容的干擾。使用jquery就可以很快的實(shí)現(xiàn)。

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>div隱藏測(cè)試</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 </script>
</head>
<body>
 <button id="controller">隱藏或者顯示</button>
 <div id="contents" style="display: none;">
 <p>div的內(nèi)容</p>
 </div>
 <script>
 $("#controller").click(function () {
 if ($("#contents").is(":hidden")) {
 $("#contents").show()
 } else {
 $("#contents").hide()
 }
 })
 </script>
</body>
</html>

jqyery操作

$("#contents").is(":hidden") 可以判斷是否是隱藏

$("#contents").show() 表示display:block,

$("#contents").hide() 表示display:none;

操作元素的屬性

$("#contents").attr("style","display:none;"); //隱藏div

$("#contents").attr("style","display:block;"); //顯示div

也可以操作css屬性

$("#contents").css("display","none"); //隱藏div

$("#contents").css("display","block"); //顯示div

也可以直接使用toggle轉(zhuǎn)換開關(guān)實(shí)現(xiàn)

$("#contents").toggle()

言

一說(shuō)起隱藏HTML頁(yè)面上的元素，很多人第一反應(yīng)就是設(shè)置元素的css屬性display:none;值，這是一種最常見(jiàn)的隱藏頁(yè)面元素方法。本篇文章我們就一起看看使用CSS隱藏頁(yè)面元素的方法，以及它們的區(qū)別。

本篇文章中的例子直接放到github地址中，感興趣的同學(xué)可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文說(shuō)的一樣，最簡(jiǎn)單也最粗暴的方法就是設(shè)置元素的display屬性為none;

display:none;

設(shè)置為display:none;的元素將不會(huì)再占用頁(yè)面空間，其占用的空間會(huì)被其他元素所占有，從而會(huì)引起瀏覽器的重排和重匯。

方法2-visibility: hidden

另外一種方法是設(shè)置元素的visibility屬性為hidden。

visibility: hidden

這種做法雖然能夠隱藏元素，但是該元素仍會(huì)占用頁(yè)面空間，因此只會(huì)導(dǎo)致瀏覽器的重匯而不會(huì)引起重排。

如果希望元素隱藏后不會(huì)引起頁(yè)面布局的變化，則推薦使用visibility:hidden;方式。

方法3-opacity:0

設(shè)置元素透明度opacity屬性為0，也可以隱藏頁(yè)面元素。

opacity:0

在呈現(xiàn)上與visibility:hidden;方式一樣，同樣會(huì)占據(jù)頁(yè)面空間。

差異性-頁(yè)面布局

對(duì)頁(yè)面布局的影響主要是看是否會(huì)引起瀏覽器的重匯和重排，對(duì)應(yīng)的差異如下圖所示。

頁(yè)面布局差異

差異性-事件綁定

display:none;的元素會(huì)直接從頁(yè)面上消失，因此在該元素上綁定的事件不會(huì)生效。
visibility: hidden;的元素不會(huì)觸發(fā)綁定的事件。
opacity:0; 的元素會(huì)觸發(fā)綁定的事件，例如點(diǎn)擊會(huì)觸發(fā)click函數(shù)。

我們可以通過(guò)以下的例子來(lái)看看。

首先我們定義兩個(gè)div，分別設(shè)置為visibility: hidden;和opacity:0，在兩個(gè)div上分別綁定一個(gè)click事件。

定義div元素

綁定的事件

當(dāng)我們?cè)趦蓚€(gè)元素都進(jìn)行點(diǎn)擊時(shí)，可以在控制臺(tái)看到如下輸出結(jié)果。

結(jié)果

從上述結(jié)果可以看出和上述結(jié)論一致。

差異性-動(dòng)畫屬性

display:none;的元素會(huì)直接從頁(yè)面消失，因此定義transition效果完全無(wú)效。
visibility:hidden;的元素會(huì)在transition設(shè)置的時(shí)間內(nèi)消失，但是沒(méi)有動(dòng)畫效果。
opacity:0;的元素可以和正常元素一樣，從頁(yè)面以動(dòng)畫效果消失。

同樣我們可以通過(guò)以下這個(gè)例子來(lái)看看。

首先，我們定義兩個(gè)div，并設(shè)置其transition屬性。

div元素

定義transition效果

我們通過(guò)將鼠標(biāo)移至元素上，可以看到兩者的差異，從而驗(yàn)證了上述結(jié)論的正確性。

結(jié)束語(yǔ)

本篇文章主要講解了使用CSS隱藏元素的幾種常用方法，并講解了它們之間的區(qū)別，以便大家在特定的場(chǎng)景中進(jìn)行選擇。

在線咨詢

上一篇：CSS3實(shí)現(xiàn)文字閃動(dòng)效果
下一篇：在HTML頁(yè)面中嵌入其他頁(yè)面的方法-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商