我在组件的主 div 上使用背景图像，但它仅覆盖我在该主 div 中提供的内容（就像如果我只有半页内容，它只会在其后面呈现，而不是在全屏上呈现） 。当我使用位置固定但滚动功能被禁用时，它涵盖了所有内容。
.container-div {
background: url("../assets/images/bucket.jpg");
position: fixed;
min-width: 100%;
min-height: 100%;
}
试试这个：
.container-div {
background: url("../assets/images/bucket.jpg");
position: center;
background-size: cover;
height: 100vh; //Change this as per design needs
width: 100%; //Change this as per design needs
}
尝试使用 vh 和 vw 而不是 % 来表示宽度和高度
width: 100vw;
height: 100vh;
它的作用是使图像覆盖 100% 的视口宽度和高度。
您要求的CSS的宽度和高度将取决于父元素的大小。请参考下面的链接和示例源代码。
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>모바일 스크롤 막기</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.cont {
font-size: 30px;
font-weight: bold;
line-height: 330px;
text-align: center;
}
.cont1 { background-color: #F29B76; }
.cont2 { background-color: #EA68A2; }
.cont3 { background-color: #32B16C; }
.cont4 { background-color: #556FB5; }
.nav {
overflow: hidden;
overflow-y: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 200px;
height: 100%;
border: 2px solid #000;
background: #fff;
}
.nav .menu {
display: block;
height: 70px;
margin-top: 20px;
background-color: #EA68A2;
}
button {
position:fixed;
top:0;
right:0;
z-index:100;
width:100px;
height:50px;
}
.bnt_open { right:110px; }
/* 바디에 스크롤 막는 방법 */
.not_scroll{
position: fixed;
overflow: hidden;
width: 100%;
height: 100%
}
.not_scroll .cont {
position: relative;
top: 0;
}
</style>
</head>
<body>
<button type="button" class="bnt_open">메뉴보기</button>
<button type="button" class="bnt_close">메뉴닫기</button>
<div style="display:none" class="nav">
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
<a class="menu">menu1</a>
</div>
<div class="cont cont1">content1</div>
<div class="cont cont2">content2</div>
<div class="cont cont3">content3</div>
<div class="cont cont4">content4</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
var posY;
$(".bnt_open").on("click", function(e){
posY = $(window).scrollTop();
$("html, body").addClass("not_scroll");
$(".nav").css("display","block");
$(".cont").css("top",-posY);
});
$(".bnt_close").on("click", function(){
$("html, body").removeClass("not_scroll");
$(".nav").css("display","none");
posY = $(window).scrollTop(posY);
});
</script>
</body>
</html>有时设置全屏背景图像肯定会很痛苦，尤其是BS。如果你想将背景应用到整个身体，请尝试这个方法-
body {
background: url('../assets/images/bucket.jpg') no-repeat center center fixed;
-webkit-background-size: cover;/*For Safari*/
-moz-background-size: cover;/*For Mozilla*/
background-size: cover;
-o-background-size: cover;/*For Opera*/
}
对于应用 div 的背景，@NigelDcruz 提供的答案是正确的！
我在这里遇到了同样的问题，我是如何解决的。 （我找到了观看 YouTube 视频的方法；https://www.youtube.com/watch?v=zHZRFwWQt2w&list=WL&index=18）
HTML 文件；
<div class="hero">
<div class="container d-flex justify-content-center align-items-center">
<h1 > Stockoverflow.</h1> </div>
CSS 文件；
.hero{
background-image: url('../assets/images/bucket.jpg');
background-size: cover;
position: relative;
width: 100vw;
}