Question

我在伪：在

之后添加了一个背景图片

::after {
  content: '';
  display: block;
  position: absolute;
  right: -2.5rem;
  bottom: -1.5rem;

  height: 9.5rem;
  width: 9.5rem;
  background-image: url('../img/icons/icon_logo.svg');
  background-repeat: no-repeat;
  // background-size: 100% auto;
  background-size: cover;
}

但是图像比盒子的实际尺寸大。

知道如何解决这个问题吗？

（在webkit浏览器中正常工作）

!!!其他信息：

我尝试了其他svg并且效果很好。

作品：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#FF6C00" d="M0 0h64v64H0z"/>
  <path fill="#FFF" d="M33 0C22 0 13 9 ..."/>
</svg>

不起作用：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#FFF" d="M0 0h64v64H0z"/>
  <defs>
       <path id="a" d="M0 0h64v64H0z"/>
  </defs>
  <clipPath id="b">
       <use xlink:href="#a" overflow="visible"/>
  </clipPath>
  <path fill="#277052" d="M43.7 51.8s-...."/>
  <defs>
       <path id="c" d="M0 0h64v64H0z"/>
  </defs>
  <clipPath id="d">
       <use xlink:href="#c" overflow="visible"/>
  </clipPath>
  <path fill="#EE7203" d="M40.7 28.7c0 4.8-3..." clip-path="url(#d)"/>
  <path fill="#1D1D1B" d="M43 10.9c.2.1.4 0..." clip-path="url(#d)"/>
</svg>

Answer 1

阅读此link

当将图形保存为SVG文件时，Adobe Illustrator为我提供了四种声明样式表属性的选项



演示文稿属性



样式属性



样式属性（实体参考）



样式元素



使用前三种方式设置属性没问题，但将样式表嵌入到元素内的SVG内容会导致问题！

Answer 2

尝试将 display：block 添加到css。

Answer 3

我在IE中渲染CSS时遇到了类似的问题。我的解决方案：

确保在html

<!DOCTYPE>

添加元标记<meta http-equiv="X-UA-Compatible" content="IE=edge" >（这可确保您的代码始终呈现最新版本的Internet Explorer;否则，它可以从旧版本渲染，而且事情变得非常混乱。）

我希望有所帮助。

IE 11：后台大小不起作用

3 个答案: