📜  CSS |不透明度/透明度

📅  最后修改于: 2021-08-31 07:37:57             🧑  作者: Mango

不透明度是描述元素透明度的元素的属性。

图像不透明度:图像中使用不透明度属性来描述图像的透明度。不透明度的值介于 0.0 到 1.0 之间,其中低值代表高透明度,高值代表低透明度。不透明度的百分比计算为不透明度% = 不透明度* 100

例子:



    
        Opacity property
        
    
    
        
            

Image with 100% opacity (original image)

                         

            

Image with 50% opacity

                     
                         

输出:
图像不透明度

图像悬停不透明度:当鼠标放在图像上时,悬停不透明度属性会应用于图像,否则不透明度属性会发生变化。
通过首先将不透明度设置为较高的值,然后将其悬停在其上方时将其降低,不透明度的值可以轻松地逆转该过程,例如:

.hightolow {
    opacity: 1.0;
}

.hightolow:hover {
    opacity: 0.5;
}

例子:



    
        Image Hover Opacity
        
    
    
        
            

Image Hover Opacity:

            
            

        
                         

输出:
悬停图像不透明度

透明框和使用 RGBA 值的透明度:在透明框中,子属性从父属性继承属性,但在使用 RGBA 的透明度的情况下,仅使用或应用不透明度属性来为元素的背景添加透明度。

例子:




    Transparent box
    


    

Transparent Box

    

10% opacity

    

50% opacity

    

80% opacity

    

100% opacity



        
    

RGBA color values

    

10% opacity

    

50% opacity

    

80% opacity

    

100% opacity

                                    

不透明度

透明框中的文本: opacity 属性可用于减少或增加框的不透明度,并将文本放入其中以制作最令人震惊的帖子。

例子:



    
        
    
    
        
            
                

GeeksforGeeks

            
        
                         

输出:
文本框不透明度