如何在速记背景属性中包括background-cover值？ [英] How to include the background-cover value in the shorthand background property?

问题描述

我想设置一个背景图像，以扩展到< div> 的宽度和高度的全部范围。 < div> 将具有可变大小，因此我使用 background-size：cover;

I am trying to set a background-image to stretch to the full extent of a <div>'s width and height. The <div> will be of variable size, so I am using background-size: cover;

background: url("../images/bkgnd-sidebar.png") no-repeat left top cover;

我不知道如何将它放在这个简写符号中，并使它工作。如果我单独列出每个属性，它工作正常，但我希望一个一体化的解决方案。

I cannot figure out how to place it in this shorthand notation and have it work. If I list each property independently, it works fine, but I was hoping for an all-in-one solution.

这是可行的，但不是首选：

This works, but is not preferred:

background-size:cover;
background-image:url('../images/bkgnd-sidebar.png');

推荐答案

根据​​W3 和 MDN ，需要将背景尺寸与背景位置分开：

According to the W3 and MDN, there needs to be a slash separating the backgound-size from the background-position:

W3C示例：

p { background: url("chess.png") 40% / 10em gray  round fixed border-box; } 

MDN ：

此属性必须在background-position之后指定，
用'/'字符分隔。

This property must be specified after background-position, separated with the '/' character.

b $ b

Opera还有一些有关后台速记的信息：

Opera also has some information on the background shorthand:

http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html

这篇关于如何在速记背景属性中包括background-cover值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！