当前第2页 返回上一页
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
opacity(%) :转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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 >
|
效果图:
更多编程相关知识,请访问:编程入门!!
以上就是html img图片怎么设置透明度的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
Html中iframe标签有哪些用法
css怎么设置在底部
Html怎样使用style添加属性
怎样建立新的css规则
实例教你使用关于Html strike标签的使用方法
css white-space属性怎么用
css如何做三角形
css样式冲突怎么办
css里面怎么让body内容居中
Html css怎么设置字体大小
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html img图片怎么设置透明度