为什么我的 CSS `content: url()` 图像在 Firefox 中不显示？

Firefox 不显示内容 URL 图像

在 CSS 中，content 属性允许您将内容插入到元素中，例如图像。这对于创建自定义图标或装饰元素非常有用。但是，用户遇到了内容 URL 图像在 Firefox 浏览器中不显示的问题。

要解决此问题，必须了解 content 属性与伪元素结合使用，例如： :之前和::之后。在提供的示例中：

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

内容属性直接应用于 .googlePic 类，这是不正确的。要使其在 Firefox 中工作，您需要使用 ::before 伪元素。下面是更正后的代码：

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

通过使用 ::before 伪元素，您可以在元素的实际内容之前添加图像内容。这可以确保图像在 Firefox 中正确显示。请记住，content 属性仅适用于伪元素。

以上是为什么我的 CSS `content: url()` 图像在 Firefox 中不显示？的详细内容。更多信息请关注PHP中文网其他相关文章！