css怎样给图片加遮罩层?
Admin 2021-05-07 群英技术资讯 2446 次浏览
在开发中,有些需要需要我们给图片加遮罩层,例如鼠标移至图片有遮罩层效果且有删除,添加,更改等操作,那么这一效果要如何实现呢?下面小编就给大家分享如何利用css给图片加遮罩层的代码。
先看效果:
鼠标移在图片上时,添加阴影效果+文字 / 图标
实现的关键是 CSS 的 opacity 和 hover,本文也主要介绍遮罩层的实现
HTML:
<div class="img_div"> <img src="item.image_base64" @click="deleteImg" class="imgCSS"> <div class="mask"> <h3><Icon type="ios-trash-outline" size="40"></Icon></h3> </div> </div>
CSS:【删除了一些和上图实现无关的代码】
我觉得重点代码是
父级元素 img_div 要display: block;position: relative;
子级元素 mask 遮罩层 position: absolute;opacity: 0;pointer-events:none;
鼠标悬浮时 opacity: 1;
其他大家都可根据业务需要进行改进,需要指出的是 pointer-events:none 目的是解决有遮罩层绝对定位时,点击图片无法触发事件,比如代码中的 deleteImg 事件
.img_div { border-radius: 10px; display: block; position: relative; } .imgCSS { height: 100%; width: 100%; border-radius: 10px; display: block; cursor: pointer; } .mask { position: absolute; background: rgba(101, 101, 101, 0.6); color: #ffffff; opacity: 0; top: 0; right: 0; width: 100%; height: 100%; border-radius: 10px; pointer-events:none; } .mask h3 { text-align: center; margin-top: 25%; } .img_div:hover .mask { opacity: 1; }
以上就是关于CSS怎样给图片添加遮罩层的代码,实现还是比较简单的,上述代码有一定的借鉴价值,有需要的朋友可以了解一下,希望文本对大家学习有帮助。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了数据存储的三种方式 cookie sessionstorage localstorage 异同,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
现在很多网站都会使用到视频和音频,而在网页中嵌入音频和视频的方法有很多,其中HTML5中就有提供展示视频和音频的标签,下面我们就来看看如何使用HTML5的音频播放标签audio和视频播放标签video。
绝对定位(absolute)意思是:将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没
css等比例分割父级容器的方法有什么?当父级容器的宽度一定,我们先要实现子元素等比例分割父级容器有很多种方法,本文给大家分享五种方法,有需要的朋友可以参考,接下来就跟随小编一起学习一下吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008