CSS 中的透明背景顏色
Jay Singh
2023年2月20日
2022年4月20日
由於 CSS 的透明色，背景元件可以從頁面的另一個頂部元素中看到。background-color 屬性可用於製作透明顏色。
在 CSS 中，沒有名為 background-opacity 的屬性用於更改元素背景的不透明度或透明度，而不會影響其他元件（例如字型）。如果你嘗試使用 CSS opacity 屬性來實現這一點，它也會修改所有其他元件的不透明度。
我們將通過一些示例向你展示如何在 CSS 中更改透明背景顏色。
在 CSS 中使用 RGBA 設定背景顏色和透明度
你可以使用 RGBA 顏色，它將 alpha 透明度作為 CSS 3 中引入的顏色值的一部分。如下例所示，RGBA 顏色可用於更改背景顏色及其透明度。
程式碼示例：
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("/img/DelftStack/logo.png");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the content.</p>
</body>
</html>
在 CSS 中建立透明背景顏色
要建立透明背景顏色，請使用 CSS RGBA() 顏色程式碼。如果你想讓文字背景對訪問者可見以顯示背景圖片，該效果可用於為元素提供外觀和感覺。
程式碼示例：
<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
background-image: url("/img/DelftStack/logo.png");
background-attachment: scroll;
padding: 20px;
}
.transparent-bg{
background: rgba(255, 165, 0, 0.73);
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
<div class="transparent-bg">
Transparent Background
</div>
</div>
</body>
</html>