資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究僅設定背景顏色不透明度，CSS 中不影響文字
要在 CSS 中僅設定背景顏色而不透明度，這有助於建立疊加卡片或彈出視窗。我們可以透過減小 alpha 變數的值來降低背景顏色的不透明度，同時將顏色值賦給 background-color 屬性。
在這篇文章中，我們有三個帶有背景顏色的 div 盒子，我們的任務是在 CSS 中僅設定背景顏色的不透明度，而不影響文字。
僅設定背景顏色不透明度的方法
以下是本文將討論的，在 CSS 中僅設定背景顏色而不影響文字的方法列表，其中包含分步說明和完整的示例程式碼。
使用 rgba 設定背景不透明度
要在 CSS 中僅設定背景顏色而不影響文字的不透明度，我們將使用 CSS background 屬性和 **rgba** 值，並使用 **alpha** 值調整不透明度。
- 我們使用 div 元素建立三個盒子，並設定盒子的 padding。
- 然後，我們使用 CSS **background** 屬性使用 **rgba** 值設定盒子的背景顏色。
- 我們使用了三個盒子來顯示不同的不透明度值，分別為 30%、70% 和原色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 **rgba** 值僅設定背景顏色而不影響文字的不透明度。
<html>
<head>
<style>
div {
background: rgb(4, 175, 47);
padding: 30px;
}
.thirty {
background: rgba(4, 175, 47, 0.3);
}
.seventy {
background: rgba(4, 175, 47, 0.7);
}
.original {
background: rgba(4, 175, 47, 1);
}
</style>
</head>
<body>
<h3>
Setting opacity only to background color
not on the text in CSS
</h3>
<p>
In this example we have used <strong>rgba
</strong> value to set the opacity only to
background color not on the text in CSS.
</p>
<div class="thirty">
Background with 30% opacity
</div>
<div class="seventy">
Background with 70% opacity
</div>
<div class="original">
Background with default opacity
</div>
</body>
</html>
使用 hsla 設定背景不透明度
在這種方法中，要在 CSS 中僅設定背景顏色而不影響文字的不透明度，我們將使用 CSS background-color 屬性和 **hsla** 值，並使用 **alpha** 值調整不透明度。
- 我們使用 CSS **background-color** 屬性使用 **hsla** 值設定盒子的背景顏色。
- 然後，我們使用了三個盒子來顯示不同的不透明度值，分別為 30%、70% 和原色。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 **hsla** 值僅設定背景顏色而不影響文字的不透明度。
<html>
<head>
<style>
div {
padding: 30px;
}
.thirty {
background-color: hsla(135, 96%, 35%, 0.3);
}
.seventy {
background-color: hsla(135, 96%, 35%, 0.7);
}
.original {
background-color: hsla(135, 96%, 35%, 1);
}
</style>
</head>
<body>
<h3>
Setting opacity only to background color
not on the text in CSS
</h3>
<p>
In this example we have used <strong>hsla
</strong> value to set the opacity only to
background color not on the text in CSS.
</p>
<div class="thirty">
Background with 30% opacity
</div>
<div class="seventy">
Background with 70% opacity
</div>
<div class="original">
Background with default opacity
</div>
</body>
</html>
結論
在本文中，為了在 CSS 中僅設定背景顏色而不影響文字的不透明度，使用者可以使用 **rgba** 或 **hsla** 值降低顏色的不透明度。如果使用者使用影像或其他任何內容作為背景，他們可以為背景和內容建立一個單獨的 div，並降低背景 div 的不透明度。
更新於：2024年9月9日
7000+ 次瀏覽
廣告