本文共 1292 字，大约阅读时间需要 4 分钟。

设计和交互对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的情况下。