前端学习笔记

网速不好对图片链接的处理

2017-12-08  本文已影响6人  红姑娘

网速不好时候 页面会优先加载html

         <a href="http://www.taobao.com" target="_blank_">淘宝网</a>

1.第一种处理方式如下

    a{
                    color: #424242;
        text-decoration: none;
        width: 190px;
        height: 140px;
        display: inline-block;
        border: 1px solid black;
        text-indent: 200px;/*通过缩进 显示在超出部分*/
        white-space: nowrap;/*强制不换行*/
        overflow: hidden;/*超出部分隐藏*/
        background-image: url("https://img.alicdn.com/tfs/TB1mIGsfZLJ8KJjy0FnXXcFDpXa-190-140.png");
    }

2.第二种 设置高度为0 通过padding使图片显示出来 文字超出区域 溢出删除

    a{
        color: #424242;
        text-decoration: none;
        width: 190px;
        height: 0px;
        padding-top:140px;
        display: inline-block;
        border: 1px solid black;
        overflow:hidden;
        background-image:url("https://img.alicdn.com/tfs/TB1mIGsfZLJ8KJjy0FnXXcFDpXa-190-140.png");
        background-size: 190px 140px;
    }
上一篇下一篇

猜你喜欢

热点阅读