首頁 > 文章 > web前端 > 僅將不透明度設為背景顏色，而不是 CSS 中文字的不透明度

僅將不透明度設為背景顏色，而不是 CSS 中文字的不透明度

王林轉載: 2023-09-11 20:33:051140瀏覽

仅将不透明度设置为背景颜色，而不是 CSS 中文本的不透明度

在 CSS 中，我們可以使用 CSS 的「background」屬性來設定特定 HTML 元素的背景。有時，我們可能需要降低背景顏色的不透明度而不影響 HTML 元素的內容。

我們可以透過減少 alpha 變數的值來降低背景顏色的不透明度，同時將顏色值指派給「背景顏色」屬性。

文法

使用者可以按照以下語法僅將不透明度設為背景色，而不是 CSS 中的文字。

background: rgba(255, 0, 0, opacity);
   or
background-color: hsla(0, 100%, 30%, opacity);

使用者可以使用‘rgba’或‘hsla’來設定背景顏色；這裡「a」代表 alpha 不透明度，其值介於 0 和 1 之間。

範例 1

在下面的範例中，我們建立了 HTML div 元素並使用「background」屬性來設定背景顏色。我們使用“rgba”值來設定背景顏色。我們將“紅色”顏色設定為背景，不透明度為“0.1”，使用者可以在輸出中觀察到。

<html>
<head>
   <style>
      .div {
         background: rgba(255, 0, 0, 0.1);
         height: 100px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3>Setting up the background opacity without affecting the content of the div element</h3>
   <div class = "div">
      Hello! How are you?
   </div>
</body>
</html>

範例 2

在下面的範例中，我們使用「background-color」CSS 屬性來設定 HTML div 元素的背景。此外，我們也使用「hsla」值作為背景，並使用「0.2」alpha 不透明度值。

使用者可以在0到1之間增加或減少不透明度值並觀察背景顏色的變化。

<html>
<head>
   <style>
      .div {
         background-color: hsla(0, 100%, 30%, 0.2);
         height: 100px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3>Setting up the background opacity using the background-color: hsla CSS property without affecting the content of the div element </h3>
   <div class = "div">
      This is a content of the div element.
   </div>
</body>
</html>

範例 3

我們可以將背景div與內容div分開，並為div元素設定不透明度較低的背景顏色。

在這裡，我們有一個父 div。在父 div 中，我們有背景和內容 div。背景和內容 div 尺寸與父 div 相同。我們可以設定兩個 div 元素的 z-index 屬性，以將內容 div 顯示在背景 div 上方。

之後，我們可以使用 CSS 的「opacity」屬性來僅降低背景 div 的不透明度。這樣，我們就可以將背景 div 放在內容 div 的下方，並玩弄背景 div 的不透明度。

<html>
<head>
   <style>
      #parent {
         width: 500px;
         height: 150px;
         position: relative;
      }
      #content {
         position: absolute;
         width: 100%;
         height: 100%;
         color: white;
         font-size: 1.2rem;
         top: 0;
         left: 0;
      }
      #background {
         background: blue;
         filter: alpha(opacity=30);
         position: absolute;
         height: 100%;
         width: 100%;
         top: 0;
         left: 0;
      }
   </style>
</head>
<body>
   <h3>Setting up the background opacity using the filter: alpha(opacity = value) CSS property without affecting the content of the div element </h3>
   <div id = "parent">
      <div id = "background"></div>
      <div id = "content"> This is the content of the div element.</div>
   </div>
</body>
</html>

使用者學會了在不影響文字或 div 內容的不透明度的情況下設定背景顏色的不透明度。使用者可以在使用“rgba”或“hsla”值時降低顏色的不透明度。如果使用者有圖像或其他任何內容作為背景，他們可以為背景和內容建立單獨的 div，並降低背景 div 的不透明度。

以上是僅將不透明度設為背景顏色，而不是 CSS 中文字的不透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html background

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：什麼是文字輸入插入符號樣式？下一篇：什麼是文字輸入插入符號樣式？

看更多