我在组件的主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提供的答案是正确的！