图片上显示文字，现在有很多主流的方法，最常用的就是position设置为relative或者absolute。
本文带来了一种新的实现方式：采用height为0+overflow为visible的方式实现。
上图：
QQ20180705-104410@2x.png
为什么采用这个方式呢？首先就是为了适配问题，因为各种屏幕大小不一致，如果采用relative的方式调试起来会很麻烦，当然我也用到了relative，其作用是为了让z-index生效。
其次是高度定死了，起作用是为了方便调整位置，还有就是图片可以自动缩放，非常强大。
还有就是做了一个遮罩，可以用于加载图片，同时在移动端显示效果是一致的。
最后要讲一点：#00000044这种透明度的方式在移动端无法正常显示，应该改为: rgba(0,0,0,0.4)，这个可以自己调整
优化提示: 使用rem作为单位比px更好，可以适应不同屏幕的大小，位置和字体大小不会错乱和太小。
关门，放代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>super-box实验</title>
<style>
.super-box div,.super-box img,.super-box span{
padding: 0px;
margin: 0px;
}
.super-box{
width: 30%;
overflow: hidden;
background: #696969;
display: inline-block;
text-align: left;;
}
.super-box .content{
margin: 10px;
text-align: center;
vertical-align: middle;
height: 160px;
line-height: 160px;
overflow: hidden;
}
.super-box .content img{
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.super-box .head,.super-box .foot{
height: 0px;
overflow: visible;
width: 100%;
}
.super-box .banner{
width: 100%;
height: 30px;
line-height: 30px;
margin-top: -30px;
background-color: #00000029;
position: relative;
}
.super-box .foot{
text-align: center;
float: left;
}
.super-box .tag{
padding: 0px;
padding-left: 6px;
padding-right: 6px;
color: white;
position: relative;
font-size: 12px;
}
.super-box .title{
color: white;
width: 100%;
display: block;
}
.super-box .mask{
height: 0px;
}
.super-box .mask>div{
width: 100%;
height: 200px;
line-height: 200px;
margin-top: -200px;
text-align: center;
background: #00000085;
position: relative;
color: red;
display: none;
}
.show{
display: block !important;
}
</style>
</head>
<body style="text-align: center">
<div class="super-box">
<div class="head">
<span class="tag">hello</span>
</div>
<div class="content">
<img src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</div>
<div class="foot">
<div class="banner">
<span class="title">hello</span>
</div>
</div>
<div class="mask">
<div></div>
</div>
</div>
<div class="super-box">
<div class="head">
<span class="tag">hello</span>
</div>
<div class="content">
<img src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</div>
<div class="foot">
<div class="banner">
<span class="title">hello</span>
</div>
</div>
<div class="mask">
<div></div>
</div>
</div>
<div class="super-box">
<div class="head">
<span class="tag">hello</span>
</div>
<div class="content">
<img src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
</div>
<div class="foot">
<div class="banner">
<span class="title">hello</span>
</div>
</div>
<div class="mask" >
<div class="show">
hello word
</div>
</div>
</div>
</body>
</html>
本代码是采用vscode编写的，然后运行使用的是vscode的插件：Live Server
QQ20180705-105617.png
网友评论