How to achieve simple picture transparency with css+filter
This article is to share with you about how css+filter can achieve simple image transparency. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Complete simple transparency control function
Use the function of filter to control the transparency of picture elements.
IE8,Chrome browser is supported.
Copy the code
The code is as follows:
/ * 20% transparent /
.opacity-20 {
Filter:alpha (opacity=20); / * filter*/ that supports IE browsers
-webkit-filter:opacity (0.2); / * chrome browser filter*/ is supported
}
/ * opaque * /
.opacity-100 {
Filter:alpha (opacity=100)
-webkit-filter:opacity (1)
}
Function makevisible (cur,which) {
/ / alternately set css without transparency and with transparency
/ / when the mouse is moved into the picture, it is opaque, and when the mouse is moved out, it is displayed with transparency.
If (which==0) {
Cur.className = 'opacity-100'
} else {
Cur.className = 'opacity-20'
}
}
Thank you for reading! This is the end of this article on "how to achieve simple picture transparency in css+filter". 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!
