当前位置：首页> 正文

怎么使用css让图片实现半透明？

css中可以使用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 的坐标。

示例：

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
<!--
.alpha img{ filter: Alpha(Opacity=30, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)}
-->
</style>
</head>
<body>
<div class="alpha"><img src="img/1.webp" width="180" /><br />
以上是CSS处理后效果<br />
<br />
</div>
<div><img src="img/1.webp" width="180" /><br />
以上是处理前效果</div>
</body>
</html>

更多相关知识请关注web前端课程

以上就是怎么使用css让图片实现半透明？的详细内容，更多请关注易知道|edz.cc其它相关文章！

展开全文阅读
半透明基本属性透明透明度设置

内容头条

相关内容