css - 我无法将 CSS "background-size"值添加到 "background"属性值

<分区>

Possible Duplicate:
background-size in shorthand background property (CSS3)

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<style>
    div {
        width: 500px;
        height: 400px;
        background: red url(https://www.google.com/images/logos/google_logo_41.png) 50% 50% cover no-repeat;
    }
</style>
<div></div>

http://jsfiddle.net/gu9fh

我想定义一个值为 cover 的 CSS background-size 属性。但我不倾向于编写单个 background-size 属性。我想将它组合到 background 属性中。但是背景不显示。

如何将 CSS background-size 值 cover 添加到 background 属性的值？

谢谢。

最佳答案

还没有注意到的是，并非所有浏览器(包括 Chrome)都支持新的 CSS3 背景简写。

为了获得更好的支持，您可能应该单独使用 background-size 属性，因为大多数新浏览器都支持这种方式。

div {
    width: 500px;
    height: 400px;
    background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat scroll 50% 50%;
    background-size: cover;
}

上面的代码在 FireFox 和 Chrome 中都有效，而简写则不能。

有关演示和正确的属性排序，请参阅下面的链接。

参见 Dev - Opera - Background Shorthand

关于css - 我无法将 CSS "background-size"值添加到 "background"属性值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12041951/

上一篇：jquery - 在 jQuery Mobile 中如何删除弹出对话框中的关闭图标

下一篇：css - 使用 CSS(无 JavaScript)自动切换水平/垂直设计？

javascript - jQuery/JS – 单击时滚动到下一个元素(可滚动的 div 问题)

视频作为网站背景？ HTML 5

css - 以给定百分比开始的背景

css - 如何在没有 jQuery 的情况下悬停时更改 div 背景图像？

asp.net-mvc - 如何动态添加带图像的左边框

html - Bootstrap 3 列内的相对 div 不受尊重

javascript - 背景图片的JS动画缩放

ruby-on-rails - 保持 rake 作业运行

html - 无法在CSS中设置背景图片