透明 CSS 背景色

Question

我想通過使用不透明度使列表菜單的背景消失，而不影響字體。 CSS3 有可能嗎？

Answer 1

現在你可以像這樣在 CSS 屬性中使用rgba了：

.class {
    background: rgba(0,0,0,0.5);
}

0.5 是透明度，根據您的設計更改值。

現場演示http://jsfiddle.net/EeAaB/

更多信息http://css-tricks.com/rgba-browser-support/

Answer 2

記住這三個選項（你想要#3）：

1）整個元素是透明的：

visibility: hidden;

2）整個元素有點透明：

opacity: 0.0 - 1.0;

3）只是元素的背景是透明的：

background-color: transparent;

Answer 3

為此，您必須修改元素的background-color 。

創建（半）透明顏色的方法：

• CSS 顏色名稱transparent創建一種完全透明的顏色。

  用法：

   .transparent{ background-color: transparent; }

• 使用rgba或hsla顏色函數，允許您將 alpha 通道（不透明度）添加到rgb和hsl函數。 它們的 alpha 值范圍為 0 - 1。

  用法：

   .semi-transparent-yellow{ background-color: rgba(255, 255, 0, 0.5); }.transparent{ background-color: hsla(0, 0%, 0%, 0); }

  ---

  從 CSS Color Module Level 4 開始， rgb和hsl的工作方式與rgba和hsla相同，接受可選的 alpha 值。 所以現在你可以這樣做：

   .semi-transparent-yellow{ background-color: rgb(255, 255, 0, 0.5); }.transparent{ background-color: hsl(0, 0%, 0%, 0); }

  ---

  對標准（Color Module Level 4）的相同更新也帶來了對空格分隔值的支持：

   .semi-transparent-yellow{ background-color: rgba(255 255 0 / 0.5); }.transparent{ background-color: hsla(0 0% 0% / 0); }

  我不確定為什么這兩個語法會比舊語法更好，因此請考慮使用以a后綴、逗號分隔的變體以獲得更好的支持。

• 除了已經提到的解決方案，您還可以使用帶 alpha 值的 HEX 格式（ #RRGGBBAA或#RGBA notation ）。

  它包含在同一個 CSS Color Module Level 4 中，因此它的支持比前兩個解決方案差，但它已經在更大的瀏覽器中實現（抱歉，沒有 IE）。

  這與其他解決方案不同，因為它也將 alpha 通道（不透明度）視為十六進制值，使其范圍為 0 - 255 ( FF )。

  用法：

   .semi-transparent-yellow{ background-color: #FFFF0080; }.transparent{ background-color: #0000; }

您也可以嘗試一下：

• transparent ：

   div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: transparent; }

   <img src="https://via.placeholder.com/200x100"> <div> Using `transparent` </div>

• hsla() ：

   div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: hsla(250, 100%, 50%, 0.3); }

   <img src="https://via.placeholder.com/200x100"> <div> Using `hsla()` </div>

• rgb() :

   div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: rgb(0, 255, 0, 0.3); }

   <img src="https://via.placeholder.com/200x100"> <div> Using `rgb()` </div>

• 具有空格分隔值的hsla() ：

   div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: hsla(70 100% 50% / 0.3); }

   <img src="https://via.placeholder.com/200x100"> <div> Using `hsla()` with spaces </div>

• #RRGGBBAA ：

   div { position: absolute; top: 50px; left: 100px; height: 100px; width: 200px; text-align: center; line-height: 100px; border: 1px dashed grey; background-color: #FF000060 }

   <img src="https://via.placeholder.com/200x100"> <div> Using `#RRGGBBAA` </div>

Answer 4

是的，那是可能的。 只需使用rgba-syntax作為背景色即可。

    .menue {
      background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
    }

Answer 5

這是一個使用名為 colors 的 CSS 的示例類：

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

這會添加一個 25% 不透明（彩色）和 75% 透明的背景。

警告不幸的是，不透明度會影響它所附加的整個元素。
因此，如果該元素中有文本，它也會將文本的不透明度設置為 25%。 :-(

解決這個問題的方法是使用rgba或hsla方法將透明度*指示為所需背景“顏色”的一部分。 這允許您指定背景透明度*，獨立於元素中其他項目的透明度。

• 從技術上講，我們正在設置opacity ，盡管我們經常喜歡用transparency來說話/思考。 顯然它們是相關的，彼此相反，所以設置一個決定另一個。 指定的數字是不透明度 %。 1 是 100% 不透明，0% 透明，反之亦然）。

以下是在不影響其他元素的情況下將藍色背景設置為 75% 不透明度（25% 透明）的 3 種方法：

• background: rgba(0%, 0%, 100%, 0.75)
• background: rgba(0, 0, 255, 0.75)
• background: hsla(240, 100%, 50%, 0.75)

Answer 6

在這種情況下background-color:rgba(0,0,0,0.5); 是最好的方法。 例如： background-color:rgba(0,0,0,opacity option);

Answer 7

試試這個：

opacity:0;

對於 IE8 及更早版本

filter:Alpha(opacity=0); 

W3Schools 的不透明度演示

Answer 8

是的，您可以將純文本作為

.someDive{
    background:transparent 
}

Answer 9

對於您的情況，我們可以使用rgba() ：首先，我們操縱背景顏色，並使用 rgba.

    .selector {
        background-color: rgba(0, 0, 0, 0.3);
    }

現在它所做的是，它基本上為您的元素添加了不透明度以及黑色背景顏色。 這就是你運行它時的樣子。

 body {background-color: #0008f3;}.container { height: 100px; width: 100px; background-color: rgba(255,255,255,0.5); }

 <body> <div class="container"></div> </body>