Rumah > Artikel > hujung hadapan web > html img图片怎么设置透明度
html img图片怎么设置透明度
- 青灯夜游asal
- 2021-02-22 12:04:589748semak imbas
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;
属性值：
value：指定不透明度。从0.0（完全透明）到1.0（完全不透明）
示例：
<!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>效果图：
方法2：使用filter:opacity(%)
filter 属性定义了元素(通常是a1f02c36ba31691bcfe87b2722de723b)的可视效果(例如：模糊与饱和度)。
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>效果图：
更多编程相关知识，请访问：编程入门！！
Atas ialah kandungan terperinci html img图片怎么设置透明度. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html怎么让文字在图片表面Artikel seterusnya：xpath定位和css定位的区别是什么