CSS opacity 只給背景色，而不是文字就可以了？ [復制]

Question

這個問題在這里已經有了答案：

如何使用 CSS 為文本或圖像提供透明背景？ (31 個回答)

6年前關閉。

我可以將opacity屬性僅分配給div的background屬性而不是其上的文本嗎？

我試過了：

background: #CCC;
opacity: 0.6;

但這不會改變不透明度。

Answer 1

聽起來您想使用透明背景，在這種情況下，您可以嘗試使用rgba()函數：

rgba(R, G, B, A)

R（紅色）、G（綠色）和 B（藍色）可以是<integer> s 或<percentage> s，其中數字 255 對應於 100%。 A (alpha) 可以是介於 0 和 1 之間的<number>或<percentage> ，其中數字 1 對應於 100%（完全不透明度）。

RGBa 示例

background: rgba(51, 170, 51, .1) /* 10% opaque green */ background: rgba(51, 170, 51, .4) /* 40% opaque green */ background: rgba(51, 170, 51, .7) /* 70% opaque green */ background: rgba(51, 170, 51, 1) /* full opaque green */

一個展示如何使用rgba小例子。

截至 2018 年，幾乎每個瀏覽器都支持rgba語法。

Answer 2

最簡單的方法是使用 2 個 div，1 個用於背景，1 個用於文本：

 #container { position: relative; width: 300px; height: 200px; } #block { background: #CCC; filter: alpha(opacity=60); /* IE */ -moz-opacity: 0.6; /* Mozilla */ opacity: 0.6; /* CSS3 */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; } #text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

 <div id="container"> <div id="block"></div> <div id="text">Test</div> </div>

Answer 3

僅適用於較少用戶：

如果您不喜歡使用 RGBA 設置顏色，而是使用 HEX，有一些解決方案。

你可以使用像這樣的混合：

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

並像這樣使用它：

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

實際上，這是一個內置的 Less 函數也提供的：

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

請參閱如何使用 Less 編譯器將十六進制顏色轉換為 rgba？

Answer 4

我的技巧是用顏色創建一個透明的 .png 並使用background:url() 。

Answer 5

這適用於所有瀏覽器

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

如果您不希望透明度影響整個容器及其子項，請檢查此解決方法。 你必須有一個絕對定位的孩子和一個相對定位的父母來實現這一點。 不影響子元素的 CSS 不透明度

檢查不影響“兒童”的 CSS Opacity 上的工作演示

Answer 6

我有同樣的問題。 我想要一個 100% 透明的背景顏色。 只需使用此代碼； 它對我很有用：

rgba(54, 25, 25, .00004);

您可以在此網頁的左側（聯系表單區域）查看示例。

Answer 7

做到這一點的一個好方法是確實使用 CSS 3。

創建一個 div 寬度類 - 例如在頁面頂部的 supersizer：

然后設置以下 CSS 屬性：

 .supersizer { background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed; width: 100%; height: 100%; position: fixed; z-index: -1; opacity: 0.5; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; }

 <div class="supersizer"></div>

Answer 8

對於遇到此線程的任何人，這是我剛剛編寫的一個名為 thatsNotYoChild.js 的腳本，它可以自動解決此問題：

http://www.impressivewebs.com/fixing-parent-child-opacity/

基本上，它將子元素與父元素分開，但將元素保持在頁面上的相同物理位置。

Answer 9

最簡單的解決方案是創建 3 個divs 。 一個將包含另外兩個，一個具有透明背景，另一個包含內容。 使第一個 div 的位置相對並將具有透明背景的那個設置為負z-index ，然后調整內容的位置以適應透明背景。 這樣您就不會遇到絕對定位問題。

Answer 10

用：

background:url("location of image"); // Use an image with opacity

此方法適用於所有瀏覽器。

Answer 11

你不能。 你必須有一個單獨的 div 就是那個背景，這樣你就可以只應用不透明度。

我最近嘗試這樣做，因為我已經在使用 jQuery，我發現以下是最不麻煩的：

1. 創建兩個不同的 div。 他們將是兄弟姐妹，不包含在彼此或任何東西中。
2. 給text div 一個純背景色，因為這將是無 JavaScript 的默認值。
3. 使用 jQuery 獲取text div 的高度，並將其應用於background div。

我確信有某種 CSS ninja 方法可以只用浮點數或其他東西來完成所有這些，但我沒有耐心弄清楚。