img利用伪元素占位

<img alt='test demo' >

img{
  display: inline-block;
    width: 256px; height: 192px;
    color: transparent;
    position: relative;
    overflow: hidden;
}
img:not([src]) {
    visibility: hidden;
}
img::before {
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 100%;
    background-color: #fff;
    visibility: visible;
}
img::after {
    content: attr(alt);
    text-align: center;
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    line-height: 30px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 14px;
    visibility: visible;
}
复制代码

效果： 无图片时

转载于:https://juejin.im/post/5d0219b1e51d45777540fd97