Question

我写了<img>这样的标签：

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

css代码是：

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

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

Answer 1

显示替代文字，因为图片无法加载。图片无法加载，因为它没有src属性。

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

我使用不同尺寸的图像进行不同的分辨率。

然后你想要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

的示例

Answer 2

alt属性指定图像的替代文本（如果是图像）无法显示。

在此方案中alt显示为src正在进行中。

我能想到2个解决方案。

如果您不希望看到任何文字，请将alt文字留空。
使用div并指定background-image。

Answer 3

据我所知，您只能将alt属性与src属性一起使用。排除src将始终导致显示alt（正如您的示例中所发生的那样）。所以在你的情况下，你会做那样的事情：

<img id="image1" alt="image1" src="../images/home-page/image1.jpg" />

#image1 {
/* This is obsolete, as @Pugazh already mentioned (you better use fix values) */
    background-size: 100% 100%;
    position: absolute;
}

您还可以看到this fiddle。

alt文本显示在图像上

3 个答案: