Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.