基本的SVG背景图像大小属性

Question

我希望我不需要问这个问题，但我很困惑。

我在我的

上设置了一个基本的背景图像，但出现了问题。当我设置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 并单击选项卡 "computed" 以检查背景图片大小的当前状态时，它显示 background-size:auto;。当我单击此属性以查看其获取 auto 属性的位置时，它显示了 246px 70px style.css?ver=1.0.5:2266 .footer div.image-logo，这是我设置背景大小为 background-size: 246px 70px; 的 CSS。

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

- Ylama

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>

- Paulie_D

Answer 2

语法是：

• background-image（背景图片）
• background-position（背景位置）
• background-size（背景尺寸）
• background-repeat（背景重复）
• background-attachment（背景附着）
• background-origin（背景原点）
• background-clip（背景裁剪）
• background-color（背景颜色）

示例：

body {
  background-image: url(photo.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-origin: padding-box;
  background-clip: border-box;
  background-color: #ccc;
}

因��，您可能需要重新排序。（同时清除cookies）

- Hash