search

Home  >  Article  >  Web Front-end  >  CSS opacity - Code to achieve translucency in images_Experience exchange

CSS opacity - Code to achieve translucency in images_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:08:202275browse

A few days ago, a friend who is doing web design asked me this question: How to achieve the translucent effect of images through CSS, and it can be supported on both IE and Mozilla. I will share my method with you below.

The picture below shows the image transparency effect achieved through CSS

CSS opacity - Code to achieve translucency in images_Experience exchange

This effect can work on both IE and Mozilla browsers, the code is as follows

CSS opacity - Code to achieve translucency in images_Experience exchange

In IE, "opacity" needs to be defined through "filter", while in Mozilla, "opacity" can be parsed directly, so if you want this effect to be supported in both browsers, you need to combine the two All settings are added. The setting for IE: this.filters.alpha.opacity=50 and the setting for Mozilla: this.style.MozOpacity=0.5. You can directly use this line of code to define the image. You only need to modify the image address to achieve it. Picture effect.

Image with link:
CSS opacity - Code to achieve translucency in images_Experience exchange

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Code example: Pure CSS code to achieve page turning effect_Experience exchangeNext article：Code example: Pure CSS code to achieve page turning effect_Experience exchange

Related articles

See more