CSS 新的图像替换方法

CSS 新的图像替换方法指的是使用CSS技术将文字换成图片，而且不需要使用img元素来显示图片。这种技术可以提升网站的性能，同时还可以增加网站的可访问性。

下面是使用CSS新的图像替换方法的完整攻略：

1.设置隐藏的文本

第一步是要为图片设置一个隐藏的文本，当图片无法加载或者被屏幕阅读器读取时，这段文本会起到提示作用。我们可以使用display：none来隐藏这段文本：

.logo {
    text-indent: -9999px;
    overflow: hidden;
}

在这里，我们使用text-indent来将文本向左移动，并使用overflow：hidden来隐藏文本。这样就可以让用户在图片无法加载时，看到必要的提示信息。

2.使用background-image属性

接下来，我们需要使用background-image属性来将图片设置到HTML元素的背景中。

.logo {
    width: 200px;
    height: 100px;
    background-image: url(./images/logo.png);
    text-indent: -9999px;
    overflow: hidden;
}

在这里，我们使用width和height属性来定义元素的大小，然后使用background-image来设置图片。此时，你将看到效果，图片已经出现在了元素的背景中。

示例说明

以下是两个示例，用于说明如何使用CSS的新图像替换技术：

示例一：

图片文字：Logo

图片地址：./images/logo.png

<div class="logo">Logo</div>

.logo {
    width: 200px;
    height: 100px;
    background-image: url(./images/logo.png);
    text-indent: -9999px;
    overflow: hidden;
}

示例二：

图片文字：Click Here

图片地址：./images/click_here.png

<a href="#" class="click-here">Click Here</a>

.click-here {
    display: block;
    width: 200px;
    height: 40px;
    background-image: url(./images/click_here.png);
    text-indent: -9999px;
    overflow: hidden;
}

在以上示例中，我们分别使用div和a元素来实现图像替换。我们在CSS中设置了元素的大小、背景以及隐藏的文本。当图片无法加载时，用户仍然可以读到必要的提示信息。