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').

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

CSS Fail - background-position, background-repeat, background-size, background-attachment

css

background

background-position

background-size

background-repeat