僅將不透明度設為背景顏色，而不是 CSS 中文字的不透明度
- 王林轉載
- 2023-09-11 20:33:051168瀏覽
在 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中文網其他相關文章！