CSS 失敗 - 背景位置、背景重復、背景大小、背景附件

Question

當我將以下內容放入body中的div時，這可以工作：

<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">

但是當我使用 CSS 時不起作用：

<style type="text/css" media="all">
.myMainDiv {
    width:100%;
    height: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
</style>

<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">

它似乎出錯了，因為我需要為每個背景提供不同的圖片，然后這導致background-repeat等被忽略。 （注意：不同的 div 也會有不同的顯示值，block 或 none，所以它們也需要單獨說明，但這不是問題。）

任何人都知道為什么以及是否有解決方法。

Answer 1

唔。 似乎您正在覆蓋您的 CSS。 使用backgorund: url('./images/pic.jpg')作為內聯樣式是問題所在。 您正在使用此內聯樣式覆蓋所有 CSS 屬性（ background-position 、 background-repeat等）。 將backgorund: url('./images/pic.jpg')替換為backgorund-image: url('./images/pic.jpg') 。