CSS 失败 - 背景位置、背景重复、背景大小、背景附件答案

【问题标题】：CSS Fail - background-position, background-repeat, background-size, background-attachmentCSS 失败 - 背景位置、背景重复、背景大小、背景附件
【发布时间】：2017-02-27 17:41:36
【问题描述】：

当我将以下内容放入主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，所以也需要单独声明，但这不是问题。）

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

【问题讨论】：

您是否在<style> 和</style> 之间添加了.myMainDiv {...}？
你是把它放在
感谢您的回答。是的，我做到了。更新澄清。谢谢。

标签： css background background-position background-size background-repeat

【解决方案1】：

嗯。似乎您正在覆盖您的 CSS。使用backgorund: url('./images/pic.jpg') 作为内联样式是个问题。您正在使用这种内联样式覆盖所有 CSS 属性（background-position、background-repeat 等）。将backgorund: url('./images/pic.jpg') 替换为backgorund-image: url('./images/pic.jpg')。希望这行得通。

【讨论】：

哇。快速工作。如此之快，事实上我必须在 8 分钟内将其标记为答案，因为在那之前我不允许这样做。