html - 如何使用 css 在 HTML 标签上插入背景图片？

Question

这个问题对你来说可能很愚蠢，但我问这个问题的原因是因为我总是看到一些大型商业网站的源代码有这个标签，我想知道为什么:

<a href="https://www.mywebsite.com" title="" target="_blank"><i class="myclass" id="myId"></i></a>

我猜它会显示图像或图标。所以我很好奇，我想知道如何使用 css 在 html i 标记上插入图像。

Answer 1

您在 i 上设置了背景图像元素的设置方式与在任何其他元素上设置的方式相同:

1. 使用background-image属性(property)
2. 确保元素有一个显示背景的区域(具有明确的尺寸(记住它默认为 display: inline，所以 height 和 width 将不适用，除非您更改它)或提供内容它隐含维度)。

这样的:

i {
    display: inline-block;
    height: 200px;
    width: 200px;
    background-image: url(/foo/bar/baz.jpeg);
}

……但是don't use an <i> element为了这。改为编写语义标记。

使用 <span>如果您想要一个没有错误语义的内联元素。

使用<img> (具有 alt 属性)，如果您要通过图像传达信息，则根本不需要背景。