The code I bring to you today is how to use CSS to make pictures achieve a translucent effect. Let’s take a look.
<style type="text/css">
<!--
.alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)}
-->
</style>Complete html code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片半透明效果</title> <style type="text/css"> </style> </head> <body> <div class="alpha"><img src="http://www.php.cn/img/1.gif" width="180" /><br /> 以上是CSS处理后效果<br /> <br /> </div> <div><img src="http://www.www.php.cn/img/1.gif" width="180" /><br /> 以上是处理前效果</div> </body> </html>
The CSS filter effect code used: filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX= 0, StartY=0, FinishX=100, FinishY=100) Change the numbers inside to adjust the transparency and effect
Note that this CSS filter effect cannot be implemented or does not work in Firefox or Google Chrome. Therefore, we generally recommend not using CSS filters. CSS filters will occupy too much computer memory and make web browsing difficult, so you can use them appropriately.
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Answers to questions about camel case naming and JS
Boolean values, relational operators in JS, Detailed explanation and examples of logical operators
## Summary of the front-end js framework and explanation of its uses
The above is the detailed content of How to use CSS to make images translucent. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
