爲什麼CSS封面不能在「父」div上工作？

我有一個類將被多個DOM元素使用，當然.. 我創建了類.highlight並對每個高亮div，我添加了一個獨特的id它。爲什麼CSS封面不能在「父」div上工作？

.highlight { 
    height: 520px; 
    width: 100%; 
    padding: 0; 
    display: table; 
    overflow: hidden; 
    border: none; 
} 
.highlight#pixel { 
    background: url('../images/pixel.jpg') no-repeat center; 
}

每個ID都有它自己的background-image通過css。我想使用css屬性background: cover;來填充圖像的所有空間。

我認爲這將工作，如果您將覆蓋屬性添加到div .highlight，因爲id被添加到相同的div，所以我不必每次都添加封面屬性到每個id在CSS中，但這不起作用。任何想法爲什麼這不起作用。

我談談以下幾點：

.highlight { 
    height: 520px; 
    width: 100%; 
    padding: 0; 
    display: table; 
    overflow: hidden; 
    border: none; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.highlight#pixel { 
    background: url('../images/pixel.jpg') no-repeat center; 
}

日Thnx！

來源

2016-08-18 Caspert

background: url('../images/pixel.jpg') no-repeat center;

這是覆蓋在前面，那麼具體選擇.highlight的background-size規則。相反，在.highlight#<id>使用簡寫的，你可以用它來對所有.highlight元素設置背景默認值，則宣告圖像時，例如具體：

.highlight { 
    ... 
    background: no-repeat center/cover; 
} 

.highlight#pixel { 
    background-image: url('../images/pixel.jpg'); 
}

來源

2016-08-18 17:39:28 chazsolo

你是什麼意思通過顛倒規則？ '.highlight＃pixel'先，然後是'.highlight'，或者你的意思是簡寫'background：...'，然後是特定的規則：'background-image：url（）'，就像你在上面的答案中做的那樣。 – Caspert

我會在答案中澄清:) – chazsolo

感謝您的更新。 – Caspert

使用background速記CSS將覆蓋所有的背景屬性，你有.highlight。對於你的id特定的div，使用完整的背景屬性而不是shortand。

.highlight#pixel 
{ 
    background-image: url(''); 
    ... 
}

例如。

來源

2016-08-18 17:40:09

爲什麼CSS封面不能在「父」div上工作？

回答

相關問題