html图片左侧现实文字,css 关于图片上显示文字

图片上显示文字，现在有很多主流的方法，最常用的就是position设置为relative或者absolute。

本文带来了一种新的实现方式：采用height为0+overflow为visible的方式实现。

上图：

QQ20180705-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

QQ20180705-105617.png