css opacity属性_CSS中的opacity属性

冷不防 2023-03-05 09:59 42阅读 0赞

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**

**输出量**

![CSS | opacity property example][CSS _ opacity property example]

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

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

<table> 
 <tbody> 
  <tr> 
   <th>Value</th> 
   <th>Description</th> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>This specifies the opacity from 0.0 ( transparent) to 1.0 ( opaque).</td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td>This sets this property to its default value.</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>Helps in inheriting this property from its parent element.</td> 
  </tr> 
 </tbody> 
</table>

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

**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!

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

> 翻译自: [https://www.includehelp.com/code-snippets/opacity-property-in-css.aspx][https_www.includehelp.com_code-snippets_opacity-property-in-css.aspx]

css opacity属性

[CSS _ opacity property example]: /images/20230208/6ce0b6ae28ef4f1e9b2404b0466db404.png
[https_www.includehelp.com_code-snippets_opacity-property-in-css.aspx]: https://www.includehelp.com/code-snippets/opacity-property-in-css.aspx