当窗口大小从全屏变为小时，Jumbotron 和背景图像消失答案

【问题标题】：Jumbotron and background images disappear when the window size changes from full screen to small当窗口大小从全屏变为小时，Jumbotron 和背景图像消失
【发布时间】：2021-01-30 13:33:38
【问题描述】：

我的主页有问题，当窗口大小从全屏变为小屏时，jumbotron/背景图像消失，当调整大小时背景/jumbotron图像重新出现，如何使图像响应？

以下是样式：

    <style type = "text/css">
       .bd-placeholder-img {
         font-size: 1.125rem;
         text-anchor: middle;
        -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
    }

    @media (min-width: 768px) {
        .bd-placeholder-img-lg {
        font-size: 3.5rem;
        position:center;
        background-size:cover;
        background-attachment:fixed;
      }

      .jumbotron{
           margin-top:20px;
           background-image:url("{% static '9.jpg'%}" );
           background-repeat:no-repeat;
           background-size:cover;
           position:center;
           color:white;
       }

      body{
           background-image:url("{% static '8.jpg'  %}"); 
           background-repeat:no-repeat;
           background-size:cover;
           background-position:center center;
           background-attachment:fixed;
           overflow:visible;


   }

【问题讨论】：

标签： html css django bootstrap-4

【解决方案1】：

您正在为这个媒体查询@media (min-width: 768px) 中的类设置样式，这意味着当屏幕小于该值时，将不会应用样式。您需要从查询中删除这些样式。

<style type = "text/css">
       .bd-placeholder-img {
         font-size: 1.125rem;
         text-anchor: middle;
        -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
    }

 
        .bd-placeholder-img-lg {
        font-size: 3.5rem;
        position:center;
        background-size:cover;
        background-attachment:fixed;
      }

      .jumbotron{
           margin-top:20px;
           background-image:url("{% static '9.jpg'%}" );
           background-repeat:no-repeat;
           background-size:cover;
           position:center;
           color:white;
       }

      body{
           background-image:url("{% static '8.jpg'  %}"); 
           background-repeat:no-repeat;
           background-size:cover;
           background-position:center center;
           background-attachment:fixed;
           overflow:visible;


   }

【讨论】：