HTML如何設置div背景圖片的的透明度

這樣一個需求，就是在一個DIV中包含有一個Image標簽，但是在Div標簽中包含有一張背景圖片，設計圖上的樣子是這張背景圖片是有一個透明度的，但是如果直接使用opacity屬性設置的的話就會連Div中的內容的透明度也會受到影響，那么我們如何在HTML中設置div背景圖片的透明度呢？，可以通過以下幾種方法實現。

方法一：使用偽元素

這是在日常開發中被推薦使用的方法，通過這種方式實現不會影響到div中的其他內容的透明度只會影響它自己背景的透明度，詳細實現如下。

<!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; /* 調整透明度 */
            z-index: 1;
        }

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

方法二：使用RGBA顏色疊加

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

<!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">
        這里是內容
    </div>
</body>
</html>

方法三：使用CSS濾鏡

這種方式實現會影響到整個的div的樣式，也就是說頁面中的內容的透明度也會受到影響，并且這種影響不會被其他樣式所改變。如下所示。

<!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); /* 調整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內容
    </div>
</body>
</html>

以上就是實現如何調整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調的內容來講這種方式實現效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。

在實際開發中，我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式，有興趣的讀者可以留言我們一起討論。

html頁面，顯示的內容太多，會影響用戶體驗，如果有一些，點擊才出現的內容，就可以減少內容的干擾。使用jquery就可以很快的實現。

例子

<!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隱藏測試</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的內容</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轉換開關實現

$("#contents").toggle()

言

一說起隱藏HTML頁面上的元素，很多人第一反應就是設置元素的css屬性display:none;值，這是一種最常見的隱藏頁面元素方法。本篇文章我們就一起看看使用CSS隱藏頁面元素的方法，以及它們的區別。

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

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

CSS

方法1-display:none

正如上文說的一樣，最簡單也最粗暴的方法就是設置元素的display屬性為none;

display:none;

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

方法2-visibility: hidden

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

visibility: hidden

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

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

方法3-opacity:0

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

opacity:0

在呈現上與visibility:hidden;方式一樣，同樣會占據頁面空間。

差異性-頁面布局

對頁面布局的影響主要是看是否會引起瀏覽器的重匯和重排，對應的差異如下圖所示。

頁面布局差異

差異性-事件綁定

display:none;的元素會直接從頁面上消失，因此在該元素上綁定的事件不會生效。
visibility: hidden;的元素不會觸發綁定的事件。
opacity:0; 的元素會觸發綁定的事件，例如點擊會觸發click函數。

我們可以通過以下的例子來看看。

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

定義div元素

綁定的事件

當我們在兩個元素都進行點擊時，可以在控制臺看到如下輸出結果。

結果

從上述結果可以看出和上述結論一致。

差異性-動畫屬性

display:none;的元素會直接從頁面消失，因此定義transition效果完全無效。
visibility:hidden;的元素會在transition設置的時間內消失，但是沒有動畫效果。
opacity:0;的元素可以和正常元素一樣，從頁面以動畫效果消失。

同樣我們可以通過以下這個例子來看看。

首先，我們定義兩個div，并設置其transition屬性。

div元素

定義transition效果

我們通過將鼠標移至元素上，可以看到兩者的差異，從而驗證了上述結論的正確性。

結束語

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

在線咨詢

上一篇：CSS3實現文字閃動效果
下一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商