Rumah >hujung hadapan web >tutorial css >css怎么设置图片的透明度
css怎么设置图片的透明度
- 青灯夜游asal
- 2021-04-21 15:51:3920988semak imbas
css设置图片透明度的方法：1、使用filter属性，给图片元素添加“filter:opacity(数值%)”样式；值在0和100之间，“0%”则是完全透明，“100%”则图像无变化。2、使用opacity属性，语法“opacity:值”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
方法1：使用filter属性--filter:opacity(%)
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
opacity(%) ：用于转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img1{
-webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
filter: opacity(50%);
}
.img2{
-webkit-filter: opacity(20%); /* Chrome, Safari, Opera */
filter: opacity(20%);
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="img/1.jpg" width="300"/>
</div>
<div>
<p>透明度为50%：</p>
<img class="img1" src="img/1.jpg" width="300"/>
</div>
<div>
<p>透明度为20%：</p>
<img class="img2" src="img/1.jpg" width="300"/>
</div>
</body>
</html>效果图：
方法2：使用opacity属性
Opacity属性设置一个元素了透明度级别。值的范围：从0.0（完全透明）到1.0（完全不透明）。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.img1{
opacity: 0.5;
}
.img2{
opacity: 0.2;
}
</style>
</head>
<body>
<div>
<p>原图：</p>
<img src="img/1.jpg" width="300"/>
</div>
<div>
<p>透明度为0.5：</p>
<img class="img1" src="img/1.jpg" width="300"/>
</div>
<div>
<p>透明度为0.2：</p>
<img class="img2" src="img/1.jpg" width="300"/>
</div>
</body>
</html>效果图：
（学习视频分享：css视频教程）
Atas ialah kandungan terperinci css怎么设置图片的透明度. 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：css怎么设置边框内颜色Artikel seterusnya：css怎么设置边框的宽度