绝对定位div背景大小：封面不起作用

Question

我有一个类popOver。

CSS

.popOver {
    position: absolute;
    left: 100px;
    right: 100px;
    top: 100px;
    bottom: 100px;
    background-size: cover;
    background:url('http://lorempixel.com/400/200');
}

这不会按预期结果。 background-size: cover没有任何影响，为什么会这样？

这是小提琴 http://jsfiddle.net/ksLd13y8/

Answer 1

这是因为background-size属性在之后被background属性集覆盖。来自MDN：

  

如果未在background CSS属性后应用于该元素的background-size速记属性中设置此属性的值，则此属性的值将重置为其初始值简写财产。

以下是三个选项：

• 在 background-size属性之后设置background属性：

  Example Here

  background: url('http://lorempixel.com/400/200');
  background-size: cover;
  

• 使用属性background-image设置背景图片而不是background速记属性：

  Example Here

  background-size: cover;
  background-image: url('http://lorempixel.com/400/200');
  

• 或使用简写来设置两个属性：

  Example Here

  background: url('http://lorempixel.com/400/200') 0 0 / cover;