手写遮罩层优化

最新推荐文章于 2023-09-04 18:20:19 发布

在路上等

最新推荐文章于 2023-09-04 18:20:19 发布

阅读量159

点赞数

分类专栏： css 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_42327537/article/details/127317960

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

.img_div {
			    border-radius: 10px;
			    display: block;
			    position: relative;
				width: 600px;
				height: 600px;
			  }
			  .imgCSS {
			    height: 300px;
			    width: 300px;
			    border-radius: 10px;
			    display: block;
			    cursor: pointer;
			  }
			   .mask {
			   position: absolute;
			   background: rgba(101, 101, 101, 0.6);
			   opacity: 0;
			   top: 0;
			   right: 0;
			   width: 100%;
			   height: 300px;
			   border-radius: 10px;
			   text-align: center;
			   margin: 0 auto;
			   pointer-events:none;
			 }
			  
			  .img_div:hover .mask {
			    opacity: 1;
			  }

<div class="img_div" onclick="deleteImg()" >
		   <img src="./企业微信截图_16638130326514.png" class="imgCSS ">
		  <div class="mask">
				玩味
		   </div>
		 </div>

效果如下

做简单修改：

.img_div {
			    border-radius: 10px;
			    display: block;
			    position: relative;
				width: 600px;
				height: 600px;
			  }
			  .imgCSS {
			    height: 300px;
			    width: 300px;
			    border-radius: 10px;
			    display: block;
			    cursor: pointer;
			  }
			   .mask {
			   position: absolute;
			   background: rgba(101, 101, 101, 0.6);
			   opacity: 0;
			   top: 0;
			   right: 0;
			   width: 100%;
			   height: 300px;
			   border-radius: 10px;
			   text-align: center;
			   margin: 0 auto;
			   pointer-events:none;
			 }
			  
			  .img_div:hover .mask {
			    opacity: 1;
			  }

效果如下：