Question

我在CSS中有一个固定背景图片的页面，它位于内容div的上方。但是由于某种原因，内容div有一个我似乎无法摆脱的背景，因此重叠在背景图像上。

**请注意

这是html：

<div class="background"></div>
<div class="content clear"> 
    <br> 
    <br>
    <br>
        <?php 
            $section = $_GET["section"];
            if ($section == 'changePassword'){
                include "changePassword.php";
            }
        ?>
<script type="text/javascript" src="main.js"></script>
</div>

CSS：

.background {
    background-image: url('../assets/19.jpg');
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 300%;
    z-index: -1;
    background-size: 100% auto;
}
.clear {
    background: transparent;
    position: initial;
}

Answer 1

为什么要为背景图像使用单独的div？只需使用正文标记：

body {
    background-image: url('../assets/19.jpg');
}

这应该会大大简化您的CSS，并可能解决您的问题。

Answer 2

您可以使用 background-image：none 作为div。

.clear {
    background-image:none;
}

Answer 3

我认为你正以错误的方式接近这一点。要添加固定的CSS背景图像，您应该使用如下代码：

HTML：

<div class="content clear"> 
<br> 
<br>
<br>
    <?php 
        $section = $_GET["section"];
        if ($section == 'changePassword'){
            include "changePassword.php";
        }
    ?>
<script type="text/javascript" src="main.js"></script>
</div>

CSS：

.clear {
    background: url('../assets/19.jpg') no-repeat fixed ;
    background-size:100% 100%;
    position: initial;
    background-repeat: repeat-x;
    background-repeat: repeat-y;
}

Answer 4

你说

<div class="content clear">

然而你的CSS被命名为

.clear

这与div的名称不匹配，因此对div没有任何作用，请尝试：

<div class="content">

和

.content{
background: rgba(0,0,0,0.0);
}

<div>覆盖背景图片</div>

4 个答案: