bootstrap/css 中的背景图片未覆盖全屏

Question

我在组件的主要 div 上使用了背景图像，但它只覆盖了我在该主要 div 中提供的内容（就像我只有一半-页面内容它只呈现在它后面而不是全屏）。它涵盖了我使用固定位置但禁用滚动功能时的所有内容。

.container-div {
  background: url("../assets/images/bucket.jpg");
  position: fixed;
  min-width: 100%;
  min-height: 100%;
}

Answer 1

试试这个：

.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
}

Answer 2

尝试使用 vh 和 vw 而不是 % 作为宽度和高度

width: 100vw;
height: 100vh;

它将做的是使图像覆盖视口宽度和高度的 100%。

Answer 3

您询问的 css 的宽度和高度将取决于父元素的大小。请参考下面的 link 和示例源代码。

korean developer blog

<!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>

example source code

Answer 4

有时设置 full-screen 背景图片肯定会很痛苦，尤其是在 BS 的情况下。如果您想将背景应用到整个 body-

，请尝试此方法

  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 提供的答案很正确！

bootstrap/css 中的背景图片未覆盖全屏

background image in bootstrap/css does not cover full screen

css

bootstrap-vue