为什么在更新背景 div 的高度时背景 css 属性分解为背景图像？

Question

我有一个像这样的内联 css 样式的 html：

<div class="bgdiv" style="background: url('http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg') local center center no-repeat transparent;
background-size:100% 100%;
width: 400px;height:400px"> I am some dummy text. </div>

正确呈现，但如果我通过 javascript 将 div 的高度更改为500px，它会分解成这样的几个背景组件

$(document).ready(function () {
  $('.bgdiv').css('height', '500px');
});

最终/输出内联 css 样式：

background-image: url(http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg); 
background-attachment: local; 
background-color: transparent; 
background-size: 100%; 
width: 400px; 
height: 500px; 
background-position: 50% 50%; 
background-repeat: no-repeat no-repeat;

如果你注意到我申请了background，但现在是background-image，最大的问题是background-size:100%，但是我申请了background-size:100% 100%，这是出乎意料的，我不希望它改变。

这里是演示http://jsfiddle.net/pu7WR/1/

请检查以查看 css 中的更改。我不确定这是否是预期的行为，但background-size:100% 正在破坏我希望它成为background-size:100% 100%

注意：我不能在这里使用类。而且我知道，我可以在更新高度后更改background-size。

但是为什么会这样呢？为什么它首先要更新？

让我知道我可以提供更多详细信息。 （我会尝试为问题提供更好的标题）

Answer 1

这很正常。 background 是一个速记属性，允许您一次设置各个属性。在内部，浏览器解析这个速记属性并将其值应用于它所代表的每个单独的属性。

这就是为什么这样的事情会导致“意外”结果：

#elem {
    background-color: red;
    background:url(/my/awesome/image.png) no-repeat scroll left top;
}

该元素将显示为没有红色背景色，因为background 速记属性将其覆盖为transparent（如果未指定，则为默认假定值）。

Answer 2

这实际上看起来像一个错误。如果您将值设置为不同的数字，那么它将始终保留它，但如果您使用两次确切的数字，它将只使用一个，这显然是一个问题，因为这意味着另一个将是自动的，这将产生不同的结果到你想要的。我发现的解决方法是将一个设置为 100%，将另一个设置为 99.99%，这显然是一个 hack，但它确实有效：

http://jsfiddle.net/pu7WR/4/

<div class="bgdiv" style="background-image: url(http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg); background-attachment: local; background-color: transparent;   background-size: 99.99% 99.99%; height: 500px; width: 400px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    I am some dummy text.
</div>

另一种选择（如果可以的话）是将内容包装在它自己的 div 中，并在该 div 上设置高度： http://jsfiddle.net/pu7WR/5/

<div class="bgdiv" style="background-image: url(http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg); background-attachment: local; background-color: transparent;   background-size: 100% 100%; height: 500px; width: 400px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    <div class="contentDiv">I am some dummy text.</div>
</div>

$(document).ready(function () {
    $('.contentDiv').css('height','500px');
});