图片上显示文字，现在有很多主流的方法，最常用的就是position设置为relative或者absolute。
本文带来了一种新的实现方式：采用height为0+overflow为visible的方式实现。
上图：
QQ0705-104410@2x.png
为什么采用这个方式呢？首先就是为了适配问题，因为各种屏幕大小不一致，如果采用relative的方式调试起来会很麻烦，当然我也用到了relative，其作用是为了让z-index生效。
其次是高度定死了，起作用是为了方便调整位置，还有就是图片可以自动缩放，非常强大。
还有就是做了一个遮罩，可以用于加载图片，同时在移动端显示效果是一致的。
最后要讲一点：#00000044这种透明度的方式在移动端无法正常显示，应该改为: rgba(0,0,0,0.4)，这个可以自己调整
优化提示: 使用rem作为单位比px更好，可以适应不同屏幕的大小，位置和字体大小不会错乱和太小。
关门，放代码：
super-box实验
.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;
}
hello
hello
hello
hello
hello
hello
hello word
本代码是采用vscode编写的，然后运行使用的是vscode的插件：Live Server
QQ0705-105617.png
