如何使用css在HTML <i>标签上插入背景图片？

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属性
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属性）而不是背景。