css opacity属性_CSS中的opacity属性[通俗易懂]

全栈程序员站长

发布于 2022-09-01 16:37:55

3.1K0

发布于 2022-09-01 16:37:55

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

css opacity属性

CSS | 不透明度属性 (CSS | opacity Property)

With the growing need of making websites, the need for styling them has also increased. Therefore, CSS has become an indispensable part of creating websites. Thus one must be aware of which properties to use while creating a website.

随着制作网站的需求不断增长，对网站进行样式设计的需求也越来越大。因此，CSS已成为创建网站必不可少的部分。因此，必须知道创建网站时要使用哪些属性。

Various properties are used for styling. Since there are so many properties to use for, it is natural for any beginner to get confused about which property to use and when.

使用各种属性进行样式设置。由于要使用的属性太多，因此任何初学者都自然会对使用哪个属性以及何时使用感到困惑。

In this segment, the discussion will be on one such property which is known as opacity.

在这一部分中，将讨论一种称为opacity的属性。

Before implementing opacity property right away let’s first discuss this property out of the CSS’s context.

在马上实现opacity属性之前，让我们首先在CSS上下文之外讨论该属性。

不透明度属性 (opacity property)

opacity is the degree of transparency of any element living or non living. If we say that a certain object is opaque then it means that object has 0 transparency, which in turn means that no one can look through that object.

不透明性是指任何存在或不存在的元素的透明程度 。如果我们说某个对象是不透明的，则意味着该对象的透明度为0 ，这又意味着没有人可以透过该对象查看。

And if we say that a certain object is transparent then that object has 0 opacity.

如果我们说某个对象是透明的，则该对象的不透明度为0 。

The same meaning of opacity holds in the CSS as well. let’s have a look!

CSS中也具有不透明度的相同含义。我们来看一下！

Definition: As mentioned earlier the opacity is the degree of transparency. In CSS the opacity property tends to set the opacity of an element.

定义：如前所述， 不透明度是透明度。在CSS中， opacity属性倾向于设置元素的不透明度 。

Degrees of Opacity:

不透明度：

1 means that the object is not transparent at all. 1表示对象根本不透明。
0.5 means that the object is semi-transparent. 0.5表示对象是半透明的。
0 means that the object is entirely transparent. 0表示对象是完全透明的。

Note: The drawback of opacity property is that if you set your elements to be transparent then all the children of attributes will also become transparent. If you want to avoid this and want to make your texts readable inside the element, then you should RGBA values instead.

注意： opacity属性的缺点是，如果将元素设置为透明的，则所有属性的子元素也将变为透明的。如果要避免这种情况，并希望使文本在元素内可读，则应改为RGBA值 。

The default value of opacity is 1.

不透明度的默认值为1。

CSS Syntax:

CSS语法：

    Element{
        opacity: number|initial|inherit;
    }

Example:

例：

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
   
   
            background-color: green;
            opacity: 0.55;
        }
    </style>
</head>

<body>
    <div>This following div element's opacity is 0.55</div>
    <div>The background colour is affected by the opacity level.</div>
</body>

</html>

Output

输出量

In the above example, the opacity level of 0.55 is applied to the div element.

在上面的示例中，将不透明度级别0.55应用于div元素。

Value	Description
number	This specifies the opacity from 0.0 ( transparent) to 1.0 ( opaque).
initial	This sets this property to its default value.
inherit	Helps in inheriting this property from its parent element.

值	描述
数	这将不透明度指定为0.0(透明)到1.0(不透明)。
初始	将此属性设置为其默认值。
继承	帮助从其父元素继承此属性。

Conclusion:

结论：

When it comes to using opacity property one should be very considerate in using it as given its drawback this property can also make your sub-elements opaque as well.

在使用不透明度属性时，应谨慎使用它，因为它的缺点是该属性也会使子元素也变得不透明。

opaque property is a very good tool when it comes to styling pictures. So have fun using it!

对于图片样式， 不透明属性是一个非常好的工具。祝您使用愉快！