Question

我希望将fixed背景设置为容器内的div（我使用Bootstrap 3）。

我想制作一个div，桌面屏幕高度为50％（移动设备为100％），背景图片固定。此div位于引导容器内，因此它不具有100％的宽度或高度。参考行为here。

但是当我制作背景图片fixed时，它会占据整个页面而我无法将两者固定并调整大小以适应容器宽度。有解决方法吗？

HTML：

<div class="container half-height">
  <div class="image" style="background-image:url(https://farm6.staticflickr.com/5140/5555177351_06069b3e9b_o.jpg)">
    <div class="description text-center">
      <h1>Title</h1>
      <div class="text-center typl8-delta">Description</div>
    </div>
  </div>
</div>

CSS：

.image{
  width:100%; height:100%; background: #eee;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  position: relative;
}
.half-height{
  height: 50%;
}
@media (max-width: 768px) {
  .half-height{
    height: 100%;
  }
}
.description{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

Answer 1

也许这有帮助。

HTML：

 <div class="container half-height main-box">
    <div class="description text-center">
        <h1>Title</h1>
        <div class="text-center typl8-delta">Description</div>
    </div>
    <div class="background-image">
        <div class="image">
        </div>
    </div>
</div>

CSS：

html, body {
    height: 1500px;
}

.half-height {
    height: 50vh;
}

@media (max-width: 768px) {
    .half-height {
        height: 100vh;
    }
}


.main-box {
    position: relative;
}

    .main-box .description {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
        z-index: 10;
        color: #fff;
    }


    .main-box .background-image {
        display: block;
        position: relative;
        height: 100%;
    }

        .main-box .background-image .image {
            width: 100%;
            height: 100%;
            background: #eee;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            position: relative;
            background-image: url(https://farm6.staticflickr.com/5140/5555177351_06069b3e9b_o.jpg);
        }

使背景图像固定并适合容器尺寸

1 个答案: