How to achieve layer transparency in CSS
This article is about how CSS achieves layer transparency. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
The specific analysis is as follows:
This code segment is a demonstration of using CSS to control the transparency of a DIV layer, you can see that the tiled background has been shown, in fact, it is relatively simple to achieve, that is, use CSS to control a DIV layer and add filter:alpha (opacity=65) when defining the style sheet; this code, the value inside is used to control transparency, you can try to change its value, there will be different transparency effects.
The code is as follows:
CSS defines the transparency effect of a layer
Body {
Font-family: Arial, Helvetica, sans-serif
Line-height: 1.5
Background: url (http://files.jb51.net/file_images/article/201505/2015513164008952.jpg);
Color: # fff
Width: 770px
Margin: 0 auto
Padding: 50px
}
H2,h3 {
Color: # 77AFC7! important
Margin-bottom: 0
Line-height: 1.2em
}
P {
Margin-top: 0
}
A {
Color: # aaa
}
A:hover {
Color: # FFF! important
Text-decoration: none
}
Code {
Background-color: # 100
Padding: 0.2em 0.5em
Display: inline-block
}
# wrapper {
Overflow: hidden
}
.overlay {
Position: absolute
Top: 0
Bottom: 0
Left: 0
Width: 100%
Background: # 000
Opacity: 0.65
-moz-opacity: 0.65
Filter:alpha (opacity=65)
}
.container {
Position: relative
Float: left
}
.content {
Position: relative
Float: left
}
# column-1 {
Width: 500px
}
# column-2 {
Width: 250px
Margin-left: 20px
Float: left
Display: inline
}
# column-1 .content {
Padding: 20px
Width: 460px
}
# column-2 .content {
Padding: 10px
Width: 230px
}
* html # column-1 .overlay {height: _ expression (document.getElementById ("column-1") .offsetHeight);}
* html # column-2 .overlay {height: _ expression (document.getElementById ("column-2") .offsetHeight);}
A transparent web page.
IE6,FF test passed
This is a transparent web page, not bad? In fact, you use CSS to control the translucent state of the DIV layer, which makes the tiled background look a lot cooler.
By CC-Public Domain
A sidebar
This is on the right, you can try to modify it.
Thank you for reading! This is the end of the article on "how to achieve layer transparency in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
