Question

我希望我从来没有问过这个，但我很困惑。

所以我在div上有一个基本的背景图片，出于某种原因，当我设置background-size: 246px 70px;它不起作用时，只有我使用！重要的是它有效。

.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时，点击选项卡＆＃34;计算＆＃34;要检查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>

Answer 2

语法是;

背景图像
背景位置
背景尺寸
背景重复
背景附件
背景来源
背景剪辑
背景颜色

例如：

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）

基本SVG背景图像大小属性

2 个答案: