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>