CSS内容画面的解决方法边缘和Internet Explorer？

Question

我有一个谷歌浏览器目前正在完美地使用CSS和内容的项目：URL（“”）;以将图像转换成页/页眉/页脚。

当我测试在Internet Explorer和Microsoft边缘部位，这些图像没有任何显示。我在寻找某种解决办法的，让我保持我已经做了，以及保持图像的CSS格式。

为了保持这个职位短，我只会在页脚图像张贴代码片段。

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

我一直在使用#merchantFoot尝试：在这种情况下之前，但我的形象吹高达尽管给这个元素的造型很大一部分（我相信图像的原始尺寸）。

Answer 1

把:after或:before你的CSS ID后

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

Answer 2

我在那里，我使用CSS的内容属性，动态地设置图像位置，基于我--deploy-url参数对一个角应用这个问题

我结合一些评论的上方为以下工作方案。这对我的作品在边缘和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%;
}