html - 替代文字显示在图像上

Question

我写了以下内容 <img>标记和 css代码:

#image1 
{
        background-image: url("../images/home-page/image1.jpg");
        background-size: 100% 100%;
        position: absolute;
}

<img id="image1" alt="image1" />

在我的网页上，图像和 alt 属性文本都显示了。如果存在图像，那么我不想显示替代文本。不知道是什么问题。任何人都知道如何解决它？问题是什么？

Answer 1

它显示替代文本，因为图像加载失败。图片加载失败，因为它没有 src属性。

• 如果您想要内容图片，请使用 src属性。
• 如果您想要背景图片，请不要使用 <img>元素。

I used different sizes of images for different resolution.

然后你想要the <picture> element :

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

示例来自 HTML5 Rocks