CSS绝对定位给图片增加遮罩

最新推荐文章于 2024-07-29 11:26:16 发布

天猫精灵998

最新推荐文章于 2024-07-29 11:26:16 发布

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43487782/article/details/108425615

版权

css 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

设计和交互对Element里面upload上传图片预览样式不满意，同时上传组件的动效bug比较多，影响用户体验，所以对这个组件的样式进行重写。其中涉及到图片增加遮罩的效果。

正常是这样：
在这里插入图片描述

鼠标hover以后是这样：
在这里插入图片描述
那么很明显遮罩的元素肯定是脱离正常文档流的，想要脱离文档流，可以使用绝对定位或者浮动，这里采用绝对定位实现。

有的同学说相对定位应该也能实现吧，确实可以实现，但是有一个问题，相对定位的元素并没有脱离正常文档流，这个元素原来的位置仍然还是保留的，所以图片下面会出现一块空白，影响页面其他元素的布局。

基本的思路如下所示，一个img标签，然后下面加一个div作为遮罩元素，这个元素相对于外面的div进行绝对定位。

<div class="img-preview">
    <img src="https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1960537320.jpg" class="img">
    <div class="img-mask">
        +
    </div>
</div>

样式如下

.img-preview {
	width: 200px;
	height: 120px;
    position: relative; /* 遮罩元素相对于这个div进行绝对定位 */
 }
 .img-preview .img {
	width: 200px;
	height: 120px;
	border-radius: 2px;
 }
 .img-preview .img-mask {
	width: 100%;
	height: 100%;
	position: absolute; /* 设置绝对定位 */
	top: 0; /* 设置绝对定位之后还要设置top不然元素还是在图片下面 */
	background: rgba(0,0,0,.7);
	color: white;
	font-size: 30px;
	text-align: center;
	/*box-sizing: border-box;*/
	/*padding: 45px 0;*/
	line-height: 120px;
	opacity: 0;
	transition: opacity .3s ease;
}
.img-preview:hover .img-mask {
	opacity: 1;
}

需要注意的是，设置绝对定位之后，还要加top: 0;，否则遮罩元素还是会出现在图片下方：

在这里插入图片描述
样式中的text-align: center;用于让文案等行内元素水平居中，垂直居中的话方案比较多，因为这边是相当于单行文本，所以采用line-height等于父元素高度的方法。对于单行文本还可以采用padding的方法，由于文本是30px，父盒子高度为120px，所以只要让盒子的内边距等于45px，这样文本就会被挤到盒子的中间，当然这么做的前提是父元素和子元素的高度都是已知，并且设置了box-sizing: border-box的情况下。