css 设置背景颜色透明度_使用CSS将不透明度仅设置为背景颜色，而不是文本

最新推荐文章于 2024-03-11 20:25:47 发布

翻译最新推荐文章于 2024-03-11 20:25:47 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

原文链接：https://www.includehelp.com/code-snippets/set-the-opacity-only-to-background-color-and-not-on-text-using-css.aspx

文章标签：

#css #python #html #css3 #javascript #ViewUI

了解如何使用CSS的RGBA值仅改变背景颜色的不透明度，而不影响文本，掌握alpha通道的概念及其实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css 设置背景颜色透明度

Introduction:

介绍：

Opacity is a very key feature when it comes to the appearance of your images and texts and various other elements. One should be very wise to use opacity property. The opacity property can either be used to enhance a particular element and of used incorrectly it can also ruin the appearance of your element in your website or web page. Although, if you want to become a good developer you need to learn about as many properties as possible and opacity is definite in that list. Using opacity can help you create different options for the appearance of your element and that too in a much stylish way. So, with that note in mind why don’t we learn more about this property in the next section.

当涉及到图像，文本和各种其他元素的外观时，不透明度是非常关键的功能。使用不透明度属性应该是非常明智的。 opacity属性既可以用来增强特定元素，又可以不正确地使用它，也可能破坏元素在网站或网页中的外观。虽然，如果您想成为一名优秀的开发人员，则需要了解尽可能多的属性，并且不透明度在该列表中是确定的。使用不透明度可以帮助您以一种非常时尚的方式为元素的外观创建不同的选项。因此，牢记这一点，为什么我们在下一节中不了解有关此属性的更多信息。

Trivia:

琐事：

The opacity property is majorly used to define or set the transparency of an element on your website or web page. As you might all be aware the value of opacity lies between 0.0 to 1.0, where 0.0 value represents high transparency and on the other hand the high value represents very low transparency. If you wish to calculate the percentage of opacity you can do that by using a very simple formula that is, Opacity%=Opacity*100. Now, that you have learned about opacity to some detail why don’t we move further with the topic and start discussing how can we set the opacity only to background color and not on text using CSS.

opacity属性主要用于定义或设置网站或网页上元素的透明度。众所周知，不透明度的值介于0.0到1.0之间 ，其中0.0值表示高透明度，而高值表示非常低的透明度。如果要计算不透明度的百分比，可以使用一个非常简单的公式Opacity％= Opacity * 100来实现 。现在，您已经详细了解了不透明度，为什么我们不进一步讨论该主题，并开始讨论如何使用CSS将不透明度仅设置为背景色而不设置为文本。

Method:

方法：

To change the opacity of the background color and not of the text using CSS, all you gotta make use of some value and you will be able to do it in no time, those values are RGBA values. Now, the question comes in mind that when we are setting the opacity then why aren't we using opacity property? This is a very apt question in this context and the answer to that is that if you use opacity then the text inside it might get fully transparent.

要使用CSS更改背景颜色而不是文本的不透明度 ，您所需要的全部都是一些值，并且这些值都是RGBA值 ，您将可以立即使用。现在，我们想到的问题是，当我们设置不透明度时，为什么不使用不透明度属性呢？在这种情况下，这是一个非常恰当的问题，答案是，如果您使用不透明度，则其中的文本可能会变得完全透明。

Syntax:

句法：

    random{
        background:rgba(red, green, blue, alpha);
    }

Example:

例：

<!DOCTYPE html>

<html>

<head>
    <style>
        .div1 {
            background: rgb(255, 0, 0, 0.1);
        }
        
        .div2 {
            background: rgba(255, 0, 0, 0.2);
        }
        
        .div3 {
            background: rgba(255, 0, 0, 0.3);
        }
        
        .div4 {
            background: rgba(255, 0, 0, 0.4);
        }
        
        .div5 {
            background: rgba(255, 0, 0, 0.5);
        }
        
        .div6 {
            background: rgba(255, 0, 0, 0.6);
        }
        
        .div7 {
            background: rgba(255, 0, 0, 0.7);
        }
        
        .div8 {
            background: rgba(255, 0, 0, 0.8);
        }
        
        .div9 {
            background: rgba(255, 0, 0, 0.9);
        }
        
        .div10 {
            background: rgba(255, 0, 0, 1.0);
        }
    </style>
</head>

<body>
    <div class="div1">
        <p>10% opacity.</p>
    </div>
    <div class="div2">
        <p>20% opacity.</p>
    </div>
    <div class="div3">
        <p>30% opacity.</p>
    </div>
    <div class="div4">
        <p>40% opacity.</p>
    </div>
    <div class="div5">
        <p>50% opacity.</p>
    </div>
    <div class="div6">
        <p>60% opacity.</p>
    </div>
    <div class="div7">
        <p>70% opacity.</p>
    </div>
    <div class="div8">
        <p>80% opacity.</p>
    </div>
    <div class="div9">
        <p>90% opacity.</p>
    </div>
    <div class="div10">
        <p>100% opacity.</p>
    </div>
</body>

</html>
</html>

Output

输出量

Set the opacity only to background color and not on text using CSS

In the above example, all opacity percent is applied to the same color.

在上面的示例中，所有不透明度百分比都应用于相同的颜色。

More points:

更多要点：

Now as you may know that each color in this rgba value defines the intensity of these colors. The "a" in "rgba" is an extension here that denotes alpha and alpha is used to specify the opacity for a color. The alpha value is similar to opacity property and has its range between 0.0 to 1.0.

现在您可能已经知道，此rgba值中的每种颜色都定义了这些颜色的强度。 “ rgba”中的“ a”是此处的扩展，表示alpha，而alpha用于指定颜色的不透明度。 alpha值类似于不透明度属性， 范围在0.0到1.0之间 。

翻译自: https://www.includehelp.com/code-snippets/set-the-opacity-only-to-background-color-and-not-on-text-using-css.aspx

css 设置背景颜色透明度