Question

我目前在谷歌浏览器中有一个完美无缺的项目，它使用CSS和内容：url（''）;将图像放入页面/页眉/页脚。

当我在Internet Explorer和Microsoft Edge中测试我的网站时，这些图像无法显示。我正在寻找某种解决方法，允许我保留我已经完成的格式化以及将图像保存在CSS中。

为了简化这篇文章，我只会在页脚中的图片上发布一段代码。

#merchantFoot {
  content:url('../images/paypal.png');
  width: 40%;
  display: block;
  padding: 2%;
}

我尝试过使用#merchantFoot：在这种情况下，但是我的图像会爆炸到很大一部分（我相信图像的原始尺寸），尽管给这个元素赋予了样式。

Answer 1

在您的CSS ID之后放入:after或:before

#merchantFoot:after {
  content:url('../images/paypal.png');
  width: 40%;
  display: block;
  padding: 2%;
}

Answer 2

我在Angular应用中遇到了这个问题，当时我在CSS中使用content属性根据我的--deploy-url参数动态设置图片位置

我将上面的一些评论合并到以下工作解决方案中。这对我来说适用于Edge和Chrome。

HTML

<!-- Change from img tag to div tag -->
<div id="merchantFoot"></div>

CSS

#merchantFoot{
    background-image: url('../images/paypal.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40%;
    padding: 2%;
}

Edge和Internet Explorer的CSS内容图像解决方法？

2 个答案: