IE 11:背景尺寸不起作用后 [英] IE 11 :after background size not working

问题描述

我在伪类:after之后添加了背景图片

I added a background-image inside the pseudo :after

::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;
}

但是图像比盒子的实际尺寸大得多.

But the image is way bigger than the actual size of the box.

有什么办法解决这个问题吗?

Any idea how to solve this?

(在Webkit浏览器中可以正常工作)

(Working fine in webkit browsers)

!!!其他信息:

我尝试了其他svg，效果很好.

I tried other svg and it works great.

作品:

<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>

推荐答案

阅读此链接

在将图形另存为SVG文件时，Adobe Illustrator为我提供了四个选项来声明样式表属性

Adobe Illustrator give me four options to declaring style sheet properties when saving graphics as an SVG file

• 演示文稿属性

• Presentation Attributes

样式属性

样式属性(实体参考)

样式元素

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

No problem using the first three ways to styling properties, but embedding style sheets into SVG content inside a element cause the problem!

这篇关于IE 11:背景尺寸不起作用后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！