HTML背景附件：已修复。滚动后背景被遮盖了

时间：2018-08-03 04:22:22

标签： html css background-image

我基本上是在尝试创建背景图像，以使其永远固定在位置上。但是，如果div内部内容过多，并且向下滚动，则图像仍会保持固定，但随着向下滚动的次数增加，图像将被“覆盖”。

View at the very top of the page looks totally fine After scrolling down a little, the background starts to get covered (you can see the image is still fixed in position)

代码段如下。我在内部div中添加了新行，以显示问题

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>

        html, body {
        height: 100%;
        margin: 0;
        }
        .bg{
        height: inherit;
        background-image: url("images/background.jpg");

        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        }

    </style>
</head>
<body>
<div class="bg">
    <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>LOL</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
    </div>
</div>
</body>
</html>

4 个答案:

答案 0 :(得分：0)

删除height 100%中的html, body，然后删除height: inherit;中的.bg。应该可以。

答案 1 :(得分：0)

您需要将overflow:scroll;添加到.bg类中

bg{
    height: inherit;
    background-image: url(http://placekitten.com/200/300);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
      overflow:scroll;//new selector added
    }

请参见Live preview

答案 2 :(得分：0)

选中此选项，只需将class“ bg”赋予主体而不是div

或仅添加

  

overfloaw：scroll

在BG课中

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>

        html, body {
        height: 100%;
        margin: 0;
        }
        .bg{
        height: inherit;
        background-image: url("https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png");
       background-size: cover;
       background-attachment: fixed;
       background-position: right top;
   
        }

    </style>
</head>
<body class='bg'>
<div >
    <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>LOL</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>

        html, body {
        height: 100%;
        margin: 0;
        }
        .bg{
        height: inherit;
        background-image: url("https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png");
       background-size: cover;
       background-attachment: fixed;
       background-position: right top;
       overflow:scroll;
        }

    </style>
</head>
<body >
<div class='bg' >
    <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>LOL</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
    </div>
</div>
</body>
</html>

答案 3 :(得分：0)

将背景图像放置到您的身体上。

另一种解决方案是：将溢出设置为您的.bg类overflow-x:auto; 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>

        body{
        background-image: url("images/background.jpg");

        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        }

        html, body {
        height: 100%;
        margin: 0;
        }
        .bg{
        height: inherit;

        }

    </style>
</head>
<body>
<div class="bg">
    <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>LOL</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
    </div>
</div>
</body>
</html>

相关问题
最新问题