HTML 背景附件：已修复。滚动后背景被覆盖
问题描述 投票：0回答：4
我基本上是在尝试创建一个背景图像，使其永远保持固定位置。然而，似乎如果 div 内部有太多内容并且我向下滚动，图像仍然保持固定，但随着我向下滚动越多，图像就会被“覆盖”。
代码片段如下。我在内部 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个回答
1
投票
投票
您需要将
overflow:scroll;.bgbg {
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 */
}
查看实时预览
0
投票
投票
去掉
height 100%html, bodyheight: inherit;.bg0
投票
投票
检查这个只需将类“bg”赋予 body 而不是 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("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>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>最新问题
- 通过 Python SDK 访问 Azure 容器因 AuthorizationPermissionMismatch 失败，但我是所有者
- 如何使用matplotlib绘制包含水平和垂直箱线图的坐标图
- NextJS TypeError：无法读取未定义的属性（读取“call”）
- Ckeditor (PHP) 的 CKfinder 返回错误
- Delphi 字节到单数
- 需要帮助编写Excel公式来增加余额，直到达到阈值或限制，然后停止增加
- Azure Marketplace SaaS 加速器安装错误：未经授权对 Key Vault 执行操作
- django：CSRF 验证失败。请求被中止。 （教程2）
- 如何去除TextFormField Flutter/Dart的左右边框？
- 为什么设置元素背景图片 url 的 jquery.css() 函数不起作用？
- 如何保持SSIS包运行并忽略SFTP中不存在的文件？
- 我们如何在 junit 测试之间清除数据库
- MUI Data-grid-pro React 组件中点击时如何在行下显示自定义组件？
- 在 ASP.NET Core 中使用 API 响应包装器
- 尽管不使用该驱动程序，但出现 Microsoft.Data.SqlClient 受信任证书错误
- 从函数应用访问 Azure Service Manager API
- 我从 Edge 浏览器的控制台收到错误。我该如何解决这个问题
- 错误的输出正则表达式
- 我想使用 Jekyll 在 GitHub Pages 上为我的网站创建一个博客？
- 在宏扩展中捕获编译器异常
© www.soinside.com 2019 - 2024. All rights reserved.