• 技术文章 >web前端 >前端问答

    html img图片怎么设置透明度

    青灯夜游青灯夜游2021-02-22 12:04:58原创107

    html img图片设置透明度的方法:1、给img图片设置“opacity:value;”样式,value值在0.0(完全透明)到1.0(完全不透明)之间;2、给img图片设置“filter:opacity(%);”样式。

    本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    html img图片设置透明度

    方法1:使用opacity设置图片透明度

    Opacity属性设置一个元素了透明度级别。

    语法:

    opacity: value;

    属性值:

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			.img2{
    				opacity: 0.5;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<p>原图:</p>
    		  <img src="demo/img/5.jpg" width="300"/>
    		</div>
    		<div>
    			<p>设置透明度的图:</p>
    		  <img class="img2" src="demo/img/5.jpg" width="300"/>
    		</div>
    	</body>
    </html>

    效果图:

    1.png

    【推荐教程:CSS视频教程 、《html视频教程》】

    方法2:使用filter:opacity(%)

    filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

    opacity(%) :转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			.img2{
    				-webkit-filter: opacity(100%); /* Chrome, Safari, Opera */
    				filter: opacity(20%);
    				
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<p>原图:</p>
    		  <img src="demo/img/5.jpg" width="300"/>
    		</div>
    		<div>
    			<p>设置透明度的图:</p>
    		  <img class="img2" src="demo/img/5.jpg" width="300"/>
    		</div>
    	</body>
    </html>

    效果图:

    2.png

    更多编程相关知识,请访问:编程入门!!

    以上就是html img图片怎么设置透明度的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:html css img 透明度
    上一篇:html怎么让文字在图片表面 下一篇:xpath定位和css定位的区别是什么
    第15期线上培训班

    相关文章推荐

    • css中更改透明度的属性是什么• 浅谈css布局中负margin的使用方法• css如何修改html标签的title样式?(代码示例)• 看看CSS中的那些背景图片函数!• CSS实现滚动阴影效果的小技巧(分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网