Question

当我将以下内容放入主div中的body时，此工作原理：

<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也会有不同的显示值，无论是块还是无，所以它们也需要单独说明，但这不是问题。）

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

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失败 - 背景位置，背景重复，背景大小，背景附件

1 个答案: