How to make color transparency in css

How to make color transparency in css: first create an HTML sample file; then create a div; finally set the transparency of the element background through the "opacity:0.5;" attribute.



The operating environment of this tutorial: windows7 system, css3 version, this method is applicable to all brand computers.

Recommendation: "css video tutorial"

CSS color transparency

1. Set element background transparency

opacity can be used to set the transparency of element background; it needs 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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34







    

    

    





    

       

       





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



the effect of setting the transparency

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

.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;  } Performance effect: Second, browser compatibility issues: The opacity attribute is not supported in IE8 and below browsers In order to achieve transparency effects, IE8 and below The browser needs to use the following tags 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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

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) } Performance effect: In IE8 and lower browsers, it can also be well adapted. Because filter:alpha(opacity=transparency) is written below, the priority of filter:alpha(opacity=transparency) is higher than opacity :0.5; priority. The final performance effect is not opacity: 0.5