How to make color transparent in css-Front-end Q&A-php.cn

How to make color transparent in css

藏色散人

Release： 2023-01-04 09:36:46

Original

3866 people have browsed it

How to make colors transparent in CSS: First create an HTML sample file; then create a div; and finally set the transparency of the element background through the "opacity:0.5;" attribute.

How to make color transparent in css

The operating environment of this tutorial: windows7 system, css3, thinkpad t480 computer.

Recommended: "css video tutorial"

CSS color transparency

1. Set element background transparency

opacity can be used to set the transparency of the element background; it requires a value between 0 and 1

0 means completely transparent (opacity: 0);

1 means completely opaque (opacity: 1);

0.5 means translucent (opacity: 0.5);

Code demonstration:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>opactity</title>
    <style>
    .box1{
                position:relative;
        width:200px;height:200px;
        background-color: #00f;
    }
         .box2{
              position:absolute;
              top:80px;
              left:80px;
              width:200px;
              height:200px;
              background-color:#0f0;
       }
       .box3{
             position:relative;
              width:200px;
              height:200px;
              background-color:#f00;
              z-index:1;
}
</style>
</head>
<body>
    <div></div>
       <div></div>
       <div></div>
</body>
</html>

Copy after login

Compare the performance of the element before setting the same name:

How to make color transparent in css

The effect of setting transparency

.box1{
                 position:relative;
             width:200px;height:200px;
            background-color: #00f;
            z-index:10;
            opacity:0.5;
     }
          .box2{
               position:absolute;
               top:80px;
               left:80px;
               width:200px;
               height:200px;
               background-color:#0f0;
               z-index:5;
               opacity:0.5;
        }
        .box3{
               position:relative;
               width:200px;
               height:200px;
              background-color:#f00;
             z-index:1;
               opacity:0.5;
 }

Copy after login

Performance effect:

How to make color transparent in css

2. Browser compatibility issues:

How to make color transparent in css

The opacity attribute is not supported in IE8 and below browsers

How to make color transparent in css

In order to achieve a transparent effect, IE8 and below The browser needs to use the following tag instead:

alpha(opacity=transparency)

Transparency select a value between 0 and 100

0 means completely transparent (filter: alpha(opacity=0);)

100 means completely opaque (filter:alpha(opacity=100);)

50 means semi-transparent (filter:alpha(opacity=50);)

This method supports IE6

filter:alpha(opacity=50);
.box1{
                position:relative;
        width:200px;height:200px;
        background-color: #00f;
                z-index:10;
                opacity:0.5;
                filter:alpha(opacity=10);
    }
.box2{position:absolute;
      top:80px;
      left:80px;
      width:200px;
      height:200px;
      background-color:#0f0;
      z-index:5;
      opacity:0.5;
      filter:alpha(opacity=50);}
.box3{
      position:relative;
      width:200px;
      height:200px;
      background-color:#f00;
      z-index:1;
opacity:0.5;
filter:alpha(opacity=80)}

Copy after login

Performance effect: It can also be well adapted to IE8 and below browsers

How to make color transparent in css

Because the element filter:alpha(opacity=transparency) is written below, the priority of filter:alpha(opacity=transparency) is higher than the priority of opacity:0.5;. The final performance effect is not opacity:0.5

The above is the detailed content of How to make color transparent in css. For more information, please follow other related articles on the PHP Chinese website!