背景覆盖背景大小

Question

背景覆盖背景大小

12

我已经知道了解决我的问题的方法，但我想知道为什么会发生这种情况。为什么背景会覆盖背景大小？请不要谈论跨浏览器的问题。

<div class="icon"></div>

CSS（层叠样式表）

.icon {
    height: 60px;
    width: 60px;
    background-size: 60px 60px;
    background: transparent url("icon.png") no-repeat 0 0;
    
}

演示

http://jsfiddle.net/K74sw/2/

- Bartek Bielawa

3个回答

8

background是CSS中的“缩写属性”，它可以将几个相关的背景属性组合成一个声明（例如background-color、background-image、background-repeat、background-position等），从而使编写更加简单。因此，它会覆盖任何没有在缩写中直接指定的属性的值为其默认值（就我所知...根据W3C规范，您可以在background-position之后在background缩写属性中指定background-size，但我尚未测试过这一点，也不知道当前浏览器的支持情况，但我怀疑它并不好）。据我所知，这是因为background缩写隐式地设置所有它表示的属性，而不仅仅是你指定的那些属性，因此，在缩写声明中未定义的任何属性都设置为其默认值。

有三种方法可以解决这个问题:

1）将background-size属性放在background属性之后

2）在更具体的选择器中添加background-size属性的声明，例如a.icon而不是.icon

3）根本不使用background缩写属性，而是使用单独的属性来指定

- Ennui

我不需要解决我的问题，因为我知道如何做。我试图理解这个解决方案和问题。为什么会发生这种情况？ - Bartek Bielawa

我认为这是因为你没有在简写声明中包含background-size，导致它被默认值覆盖。请参考W3C参考文献了解详情。该文档声称可以在简写中添加background-size，但我自己还没有测试过。 - Ennui

我添加了一个详细的解释。background 如何与 background-size 协同工作。 - Timmetje

我更新了我的帖子，以反映我做的更多研究。我仍然不确定这是否是解释（即未指定的速记属性被设置为其默认值，从而覆盖任何等效或低特异性的早期声明）但对我来说似乎是最有可能的解释，并且得到了W3C在其规范中描述速记的支持。 - Ennui

1

哈哈，那完全没问题 :) 虽然这是一个诚实的错误，但我确实很惊讶自己错了。我想我需要相信那个在脖子后面不断催促我去核实是否正确的小声音！如果我的投票能让你感觉好一点的话，我已经给你的答案点了赞 :P - Ennui

显示剩余6条评论

0

根据规范，有一种方法可以在background属性中指定大小，因此您完全不需要依赖于background-size。您可以像这样指定大小：

background: url("path-to-image.svg") center/contain no-repeat

- gearcoded

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Timmetje · Accepted Answer

background 根据你设置的大小重新设置图像位置。

原因是“background”属性是一个缩写属性，用于在样式表的同一位置设置大多数背景属性，包括您之前尝试使用的background-size属性。

编辑后的新CSS规范链接：https://www.w3.org/TR/css-backgrounds-3/#background

您可以使用：

background-size: 60px 60px;

background: transparent url("icon.png") no-repeat 0 0;

翻译成中文是：

background-size: 60px 60px;  /*You try to set bg-size*/

background-color: transparent ;
background-position: 0% 0%;
background-size: auto auto; /* it resets here */
background-repeat: no-repeat no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: url("icon.png");

因此，您可以尝试使用单独的background-...设置。

所以要么使用：

background-size: 100% 100%;
background-image: url("http://1.bp.blogspot.com/-T3EviK7nK1s/TzEq90xiJCI/AAAAAAAABCg/OMZsUBxuMf0/s400/smilelaughuy0.png");
background-repeat:no-repeat;
background-position:0 0;

http://jsfiddle.net/K74sw/9/

或者只是交换您的行。

http://jsfiddle.net/K74sw/10/