图片展示失效容错处理

Posted 2020-08-07 学如逆水行舟，不进则退。

用于当css样式失效时，能以文字显示内容提示，起个容错的处理】

 <a class="bg" href="#">淘宝网</a>

 

方法一：设置text-indent

　　

.bg {
    width: 140px;
    height: 40px;
    background-image: url(‘taobao.jpg‘);
    /*设置以下即可*/
    text-indent: 9999px; /*使文字缩进溢出隐藏*/
    white-space: nowrap; /*不换行*/
    overflow: hidden; /*溢出隐藏*/
}

 

方法二、设置padding-top,height

.bg {
    width: 140px;
    background-image: url(‘taobao.jpg‘);
    /*通过设置height为0，和合适的padding-top,将文字向下挤出*/
    height: 0;
    padding-top: 40px;
    /*将挤出的文字隐藏*/
    overflow: hidden;
}