Question

我在这个项目中使用Bootstrap 4和Sass。看起来背景图像不会随着它的内容一起扩展而叠加在小屏幕上进行扩展。我一直在寻找这样的问题，但遗憾的是没有找到解决办法。这是我的代码：

HTML

＆＃13;

    #feedback-section {
      background: url(https://images.pexels.com/photos/34166/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      min-height: 500px;
      position: relative;

    .feedback-inner {
      padding-top: 5rem;
      padding-bottom: 2.5rem;
    }

      .feedback-overlay {
        background-color: rgba(0,0,0,0.8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 500px;
      }

      #location-section {
        overflow-x: hidden;
      }

      cite img {
        border-radius: 100%;
        width: 85px;
        height: 80px;
        margin-top: 1rem;
        margin-right: 1rem;
        font-style: italic;
      }

      p {
        line-height: 1.25rem;
        margin-top: 3.75rem;
      }

      span {
        margin-left: 5px;
      }

      .feedback-inner {
        color: $font-color;
      }
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <section id="feedback-section">
          <div class="feedback-overlay">
          <div class="feedback-inner">
          <h1 class="text-center">OUR CUSTOMERS CAN'T LIVE WITHOUT US</h1>
          <div class="container">
          <div class="row feedback-wrapper">
            <div class="col-md-4">
              <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
              <cite><img src="imgs/john-doe.jpeg" alt="">&mdash;<span>John Doe</span></cite>
              </blockquote>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
                <cite><img src="imgs/jen-doe.jpeg" alt="">&mdash;<span>Jane Doe</span></cite>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
                <cite><img src="imgs/janna-doe.jpeg" alt="">&mdash;<span>Janna Doe</span></cite>
            </div>
          </div>
          </div>
          </div>
          </div>
          </section>

＆＃13;

这是Iphone 5屏幕中的图像：

Answer 1

更正您的HTML＆amp; CSS如下所示
示例在此处 - https://jsfiddle.net/zakirbd/vf78phvf/1/

HTML代码

<section id="feedback-section">
 <div class="feedback-overlay"></div>
 <div class="feedback-inner">
    <h1 class="text-center">OUR CUSTOMERS CAN'T LIVE WITHOUT US</h1>
    <div class="container">
        <div class="row feedback-wrapper">
            <div class="col-md-4">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat
                        voluptate, repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia
                        perspiciatis, autem labore. Temporibus praesentium, dolorem.</p>
                    <cite>
                        <img src="imgs/john-doe.jpeg" alt="">&mdash;
                        <span>John Doe</span>
                    </cite>
                </blockquote>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate,
                    repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis,
                    autem labore. Temporibus praesentium, dolorem.</p>
                <cite>
                    <img src="imgs/jen-doe.jpeg" alt="">&mdash;
                    <span>Jane Doe</span>
                </cite>
            </div>
            <div class="col-md-4">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dolores provident repellat voluptate,
                    repellendus sit odit quas numquam quod eveniet architecto veritatis ad officia perspiciatis,
                    autem labore. Temporibus praesentium, dolorem.</p>
                <cite>
                    <img src="imgs/janna-doe.jpeg" alt="">&mdash;
                    <span>Janna Doe</span>
                </cite>
            </div>
        </div>
    </div>
</div>
</section>

CSS代码

#feedback-section {
background: url(https://images.pexels.com/photos/34166/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
min-height: 400px;
height: 100%;
position: relative;
padding-top: 5rem;
padding-bottom: 2.5rem;
color: #fff;
z-index: 1;
.feedback-overlay {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
#location-section {
    overflow-x: hidden;
}
cite img {
    border-radius: 100%;
    width: 85px;
    height: 80px;
    margin-top: 1rem;
    margin-right: 1rem;
    font-style: italic;
}
p {
    line-height: 1.25rem;
    margin-top: 3.75rem;
}
span {
    margin-left: 5px;
}
.feedback-inner {
    color: #fff;
}
}

背景图像不会随着内容的扩展而扩展

1 个答案: