Question

我有一个奇怪的情况，为我的元素背景计算的规则与我的样式表中指定的规则不匹配：

#first {
  background: url('//my_image1.jpg');
}
#second {
  background: url('//my_image2.jpg');
}
.container {
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    overflow: auto;
    color: #fff;
}

<body>
<div id="first" class="container">Lorem ipsum</div>
<div id="second" class="container">Lorem ipsum</div>
</body>

这是一个说明我的意思的工作示例： https://jsfiddle.net/4u96pLp5/

当我查看计算出的规则时，我会看到background-attachment: scroll; background-position: 0 0等。为什么在这种情况下会忽略.container后台规则？

Answer 1

您正在background选择器中使用id速记属性，该属性比类选择器更具特异性。使用shorthand时，UA将为所有属性设置默认值，然后使用提供的值覆盖它。以下是W3C Spec：

的摘录

给定一个有效的声明，对于每一层，速记首先设置每个'background-image'，'background-position'，'background-size'，'background-repeat'，'background-origin'的相应图层，'background-clip'和'background-attachment'到该属性的初始值，然后在声明中指定为该图层指定的任何显式值。最后，'background-color'设置为指定的颜色（如果有），否则设置为其初始值。

您应该使用background-image选择器中的特定id属性。

＆＃13;

#first {
  background-image: url('http://b03.deliver.odai.yale.edu/8a/47/8a4792dd-7691-4cdc-9266-8b4503b66e8b/ag-obj-28123-001-pub-sm.jpg');
}
#second {
  background-image: url('http://c8.staticflickr.com/8/7460/27208472271_63bf023f2f_k.jpg');
}
#third {
  background-image: url('http://b01.deliver.odai.yale.edu/a4/29/a429173e-b15f-41fe-bf70-32f8d765f541/ag-obj-52875-001-pub-sm.jpg');
}
.container {
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  overflow: auto;
  color: #fff;
}
body {
  margin: 0;
}

＆＃13;

<div id="first" class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="second" class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="third" class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

＆＃13;

Answer 2

background设置所有背景属性，由于特异性，覆盖.container的background- *设置。请改用background-image。

忽略了某些css背景规则

2 个答案: