基本SVG背景图片大小属性

Question

我希望我永远不必问这个，但我很困惑。

所以我有一个基本的背景图像div，由于某种原因，当我设置background-size: 246px 70px;它时，它不起作用，仅当我使用！important时才起作用。

.footer div.image-logo {
   height: 70px;
   width: 246px;
   background-size: 246px 70px;
   background-position: center;
   background: url(/images/svg/five_Logo.svg) no-repeat;
   margin: 20px auto;
}

现在，基本上，您会认为其他css会覆盖它，这就是我的菜鸟所想，但事实并非如此，当我用背景图像检查div并单击“计算”选项卡以检查background-image-size的当前状态时它说background-size:auto;，当我单击它以查看它在哪里获得属性时，auto它显示246px 70px style.css?ver=1.0.5:2266 .footer div.image-logo了将背景尺寸设置为的css background-size: 246px 70px;。

我希望能够在不使用的情况下设置背景大小 !important

Answer 1

该background速记包括background-size:auto这是压倒你之前的 background-size声明。

把background-size语句后的background速记声明。

div {
  width: 400px;
  height: 300px;
  margin: 1em auto;
}

.one {
  background-size: 200px 100px;
  background: url(http://www.placebacon.net/400/300) no-repeat; /* I win */
}

.two {
  background: url(http://www.placebacon.net/400/300) no-repeat;
  background-size: 200px 100px; /* I win */
}

<div class="one"></div>

<div class="two"></div>