CSS 中的透明背景顏色

Jay Singh 2023年2月20日 2022年4月20日
  1. 在 CSS 中使用 RGBA 設定背景顏色和透明度
  2. 在 CSS 中建立透明背景顏色
CSS 中的透明背景顏色

由於 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>

相關文章 - CSS Background