某些CSS背景規則忽略

我有一個奇怪的情況下，規則計算了我的元素的背景不匹配我的樣式表中指定的：某些CSS背景規則忽略

#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背景規則？

來源

2016-05-27 Escher

該網址可能是錯誤的，你能告訴我你的網站地址嗎？ – Frutis

這是你所期望的嗎？ https://jsfiddle.net/4u96pLp5/1/ – Thangadurai

您在id選擇器內使用background速記屬性，該選擇器比類別選擇器具有更多特異性。當使用shorthand時，UA將爲所有屬性設置默認值，然後用提供的值覆蓋它。下面是從W3C Spec提取物：

給定一個有效的聲明，每層的速記首先設置每個「背景圖像」，「背景位置」，「背景大小」的相應層， 'background-repeat'，'background-origin'，'background-clip'和'background-attachment'，然後在聲明中爲該圖層指定任何顯式值。最後'background-color'被設置爲指定的顏色（如果有的話），否則設置爲其初始值。

您應該改用id選擇器中的特定background-image屬性。

#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; 
 
}

<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>

來源

2016-05-27 06:39:48 Harry

background將所有的背景屬性，重寫，因爲專一，從.container的背景 - *設置的。改爲使用background-image。

來源

2016-05-27 06:39:55 Alohci

某些CSS背景規則忽略

回答

相關問題