<div class="container">
<div class="content">
<img src="1.jpg">
<a style="cursor:pointer" href="#"></a>
<span>How is it going?</span>
</div>
<div class="mask">
<span>2018</span>
</div>
</div>
.container {
width: 555px;
height: 200px;
margin: 0 auto;
position: relative;
}
.mask {
/*使mask層級(jí)高于content*/
z-index: 2;
background-color: #E8921F;
opacity: 1;
transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-webkit-transition: opacity .5s ease;
-ms-transition: opacity .5s ease;
}
.mask:hover {
opacity: 0;
}
.mask,
.content a,
.content img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/*容器中用<span>包裹文字,使<span>水平垂直居中*/
.container span,
.mask span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.content span {
color: white;
font-size: 40px;
font-weight: bold;
text-align: center;
/*使content文字部分層級(jí)低于mask*/
z-index: 1;
}
.mask span {
color: white;
font-size: 48px;
font-weight: bold;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
