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>最新问题
- 使用malloc的问题
- Cloudflare 隧道和 ASP.NET Core Blazor 网站显示 404
- telnet 后关闭curl 连接
- Xpath 包含而不是精确匹配
- 如何读取以“”开头和结尾的列的 csv
- SQL 错误 - 根据其他三个表更新表的列值时出现 SQL 错误 - 需要修复
- TToolbar 按钮，下拉菜单呈灰色
- 即使我在终端下载，vscode 也无法识别 Opencv
- 使用 RestTemplate 接收 MultiValueMap 多部分/表单数据
- 在按经纬度的方格搜索时，你能帮我加快选择速度吗？
- Microsoft sql 2017 上的 Djangocms
- 如何使用此脚本将 url 转换为超链接？
- 批处理脚本重命名以日期格式 yyyymmdd 开头的文件
- 声明 JUnit 5 依赖项的正确方法
- 无法使用 XNamespace 作为属性来反序列化类
- 如何使用 yq 将代理项附加到现有的 /etc/docker/daemon.json 文件
- Paramiko 无法连接到 SSH 服务器 - 尽管用户名和密码正确，但显示身份验证失败
- 如何在离线状态下管理对 Firestore 和 Cloud Storage 的写入？
- 为什么 useEffect 在从警告exhaustive-deps linter 添加函数后会触发多个？
- 不要用nvim-cmp扩展函数参数
© www.soinside.com 2019 - 2024. All rights reserved.