背景图片处理_alicdn图片不显示-CSDN博客

本文链接：https://blog.csdn.net/lan128lan/article/details/90813866

本文介绍了淘宝网站如何处理背景图片，确保在网络加载慢时仍能提供用户体验。内容包括初步实现方式、通过HTML加载图片的备选方案以及利用CSS进行优化，通过设置padding和背景颜色实现图片显示与文字切换的效果。

摘要由CSDN通过智能技术生成

淘宝网站的图片有两种：一种例如淘宝logo,是背景图片；另一种是作为文本表达不了的图片显示。

淘宝功能强大，当网速较低加载不出来css样式时，仍然可以点击图片产生链接进行购物。这里，就这种情况来演示：

初步实现：

<a href="http://www.taobao.com" target="_blank"></a>

<style>
    a{
        display: inline-block;
        text-decoration: none;
        color: #424242;
        width: 190px;
        height: 90px;
        background-image: url(//img.alicdn.com/tfs/TB1UDHOcwoQMeJjy0FoXXcShVXa-286-118.png);
        background-size: 190px  90px;
    }
</style>

第二步：实现不加载css时，通过显示html进行加载：

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

想象很美好，但当css加载时你看到的是这个样子的：

现在开始改进，使正常时加载图片，没有‘淘宝网’三个字；不能加载css时显示‘淘宝网’三个字。

在css中添加三行代码：

/*text-indent表示  首行缩进*/
text-indent: 200px;
/*white-space: nowrap表示 强制性不换行*/
white-space: nowrap;
overflow: hidden;

效果图1：正常显示

效果图2：去掉css代码是显示：

第二张解决方案：padding

因为设置padding时，它是可以随盒子的背景色一起改变的。这里我们设置图片的height为0，用padding=90px来撑起盒子，可以实现同等效果。

a{
    display: inline-block;
    text-decoration: none;
    color: black;
    width: 190px;
    height: 0px;
    padding-top: 90px;
    background-image: url(//img.alicdn.com/tfs/TB1UDHOcwoQMeJjy0FoXXcShVXa-286-118.png);
    background-size: 190px  90px;
    overflow: hidden;
}

效果图