1

我有一个带有内联 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>

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

$(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在更新高度后更改。

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

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

4

2 回答 2

2

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

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

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

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

于 2013-10-25T10:43:35.410 回答
0

这实际上看起来像一个错误。如果您将值设置为不同的数字，那么它将始终保留它，但如果您使用两次确切的数字，它将只使用一个，这显然是一个问题，因为这意味着另一个将是自动的，这将产生不同的结果到你想要的。我发现的解决方法是将一个设置为 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');
});
于 2013-10-25T10:53:29.917 回答