css 代码中如何使用img标签中的图片处于半透明状态呢?


摘要:
下文讲述使用css代码将图片设置为半透明的方法分享,如下所示;

实现思路:
    本文中将图片设置为半透明的方法使用的是:
       filter:alpha()
    
    filter:alpha()属性语法说明:
      filter:alpha(opacity,finishopacity,style,startX,startY,finishX,finishY)
    ---------参数说明------------------
    opacity:设置对象的透明数:参数值范围为:0-100,0是完全透明,100是不透明

     finishopacity:用来设置结束时的透明度,可达到渐变效果.取值范围也是0-100

     style:设置渐变类型:0是无变化,1是线行渐变,2是放射渐变,3是X型渐变

     StartX和StartY:设置渐变透明效果的开始X和Y坐标

     FinishX和FinishY:设置渐变透明效果结束X和Y的坐标

例:

     
<meta charset='utf-8' />
<p>
 maomao365.com <br />
 设置图像标签的透明度
</p>
<hr />
<style>
 
.test{
 opacity:0.5;
filter:Alpha(opacity=50); /* IE8或更早的浏览器适用 */
}
 
</style>

<div>
设置透明度后<br />
<img class="test" src="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png" width="500" />
<br />

<br />
</div>
<div>
设置透明度前<br />
<img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png" width="500" />
</div>
css设置图片为半透明效果的示例分享

css设置图片为半透明效果的示例分享