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

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').希望这有效.