整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這樣一個需求，就是在一個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>這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現起來要簡單很多。如下所示。
<!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>這種方式實現會影響到整個的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內部有內容的情況下會影響到整個組件體系的樣式。
在實際開發中，我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式，有興趣的讀者可以留言我們一起討論。
值工具與不透明度。
可以來看一下，比如在這里取了一個顏色，取了這樣的紫色，可以在這里去設計軟件里面把這個值復制過來，復制了之后在這里去寫一下，記得要加一個井號，16進制，這個顏色就會在這里展示出來了。
這個顏色其實可以用vscode自帶的調色板工具去切換顏色色值的模式，當點擊這里的時候能切換好幾種。當去調整透明度的時候會發現后面16進制的多了兩位，包括其他的顏色模式也會把它變成a的，加了透明度a字母的模式，RGBA。
這里可以看到這里還有個HWB，這個也是從來沒有用過，有興趣可以自己去研究一下。所以可以點擊這里去切換不同的顏色模式，下面的代碼的設定也會隨之的更改。
當去調整顏色的時候會發現調節的面板顏色就斷成了兩邊，左邊這里就是當前調整變成的顏色，右邊這里就是調整之前的顏色。如果調完半天之后發現效果不滿意，想回到原來那個，可以點擊一下就回去了。
有時候如果想用16進制的顏色的寫法，但是透明度又感覺不太好設置，其實可以先把它切換為RGBA模式。比如現在一開始這里是16進制的寫法，想讓它變成20%(不透明度)的顏色，先把鼠標放這里，讓顏色色板出現之后先把它轉成RGBA的模式，調透明度，調到比如20%的透明度，0.2，再切回去，再切回到這個模式。這個就不就是16進制的帶不透明度設置的寫法，一個顏色值了。
所以這些小技巧大家都可以去用一下。當然很多時候去給某個顏色設置不透明度相對來說會比較少用，比較常用的去設置不透明度其實很多時候是之前給大家介紹過的，給整個元素用opacity去設置一個不透明度。
比如把它設置到父元素上，不透明度跟顏色的不透明度是有非常大的區別的。不透明度(opacity)是整個元素的整體，包括它的子元素也會受影響的，會看到它整體，包括內部的子元素也好，它的整體變成了很不明顯的效果了。
但是顏色的設置只會影響到設置顏色的部分(或者方面)，比如設置不透明度，它只影響到了子元素的背景顏色的不透明度。比如字體，color是給文字設置顏色的，不透明度其實也可以設置，比如把字體的不透明度降到這么低，就會發現字體自己的顏色就會變得不透明度的狀態。
比如這里來個red，就明顯能感覺到它這些都是對應各自影響的部分去產生作用的。所以有時候如果希望背景顏色有一個不透明度，但是整體的元素不想讓它有任何的半透明的效果，就可以通過特定的背景顏色的顏色色值的不透明度的設置達到想要的效果，而不影響到整體的元素。
SS技術分享：粗ps-reduced transparency：降低透明度媒體查詢。
分享一下最近看到的一個ado發布的一個scr，降低透明度的新媒體查詢功能，就這個preferred reduced transparency，它是一個支持CSS媒體查詢，識別到在系統設置這個降低透明度的特性。
比如在系統里面設置降低透明度的時候可以看到如果不開啟，默認是這個邊欄，菜單欄是有一定透明度的可以很好的和背景融合在一起。如果是開啟了就可以看到其實就是一個沒有透明度，是打印的一個顏色，就是剛好和ui的主題色是對應的一個白色。
你這個在代碼中可以通過最新的、最新的媒體選擇器來識別到，來識別到是否有開啟了降低透明的效果。這個沒查詢，比如原來的透明度是0.5，這是一個變量，透明度0.5。如果識別把透明度變成0.95，那么一個盒子的盒子的背景顏色透明度也會進行改變。
·來看結構，首先是有個div，然后下面有個隱秘值，這個隱秘值是絕對定位的，始終保持在左上角的位置。
·然后這個盒子上面這個盒子就是在它的層級的上面是有透明度的，現在我是開啟了一個降低透明的效果的。如果把它關閉可以看到透明度是會更透明一點，可以看到底下盒子的內容。
這個是因為這部分邏輯，比如說識別到透明度之后會把透明度的值變成0.95，那么就會變得不那么透明。比如現在是沒有開啟降低透明度的，它的OPPCITY是0.5，所以可以很清楚的從這里看到下面圖片上的內容。如果開啟了降低透明，那么這里的值就會變成0.95，這里的值就變成0.95，所以它的背景顏色的值也是0.95，所以就變得沒有那么透明。
這就是一個最新發現的cs的新米查詢，關于降低透明度的新特性。村望老弟。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
