Question

我有一个带背景图像（可变高度）的容器div，其中有一个瓷砖。 backgrund图像应始终以全宽度可见。在小型设备上，它应具有渐变色以逐渐淡出为白色。

如何实现这样的梯度？

到目前为止，这是我的代码：

.header-with-wide-bg-image {
  width 300px;
}

.header-with-wide-bg-image--tile {
    background: white;
    }
.header-with-wide-bg-image--logo-wrapper {
    margin-bottom: 7rem;
  }
.header-with-wide-bg-image--background:after {
    content: '';
    position: absolute;
    bottom: 0;
    background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
  }

.card {
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(51,51,51,0.4), 0 2px 4px rgba(51,51,51,0.3);
  padding: 1.5rem;
}

.p-y-15 {
  padding: 1.5rem
}

<div class="wrapper-fluid header-with-wide-bg-image">
          <div class="header-with-wide-bg-image--background" style="background-image:url('https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg'), linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));;
          background-size: 100% auto;
          background-repeat: no-repeat;
          background-position: left top;">
            <div class="container-fluid wrapper p-y-15">
              <div class="row">
                <div class="col-xs-12">
                  <div class="row">
                    <div class="col-xs-12">
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-xs-12 col-md-6">
                      <div class="card header-with-wide-bg-image--tile">
                        <h1 class="regular-font-family--bold small-h1">Headline</h1>
                        <h4>sdiuhfsuhdfjdf</h4>
                        <div>
                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem sfgdfg doifgjdf odfijgodfg nodfigjdofijg dfgdoifughdfg oidufjhgdfipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

Answer 1

将背景图像移动到img标签

<div class="header-with-wide-bg-image--background">
    <img src="https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg" alt="">
</div>

很少有CSS更新

.header-with-wide-bg-image {
  width: 300px;
  position: relative;
  overflow: hidden;
}
.header-with-wide-bg-image--background {
  position: absolute;
  width: 100%;
  z-index: -1;
}
.header-with-wide-bg-image--background img {
  width: 100%;
}
.header-with-wide-bg-image--background::after {
  display: block;
  content: '';
  background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  height: 50px;
  margin-top: -50px;
  position: relative;
}

检出小提琴https://jsfiddle.net/moorthyrweb/Lxam8uyk/

Answer 2

您可以将位置relative添加到保存背景图像.header-with-wide-bg-image的容器中，然后将:after添加到具有如下渐变的相同元素中：

.header-with-wide-bg-image:after {
  content:'';
  position: absolute;
  bottom:0;
  left:0;
  height: 120px;
  width:100%;
  background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}

签出EXAMPLE

渐变背景图像淡出

2 个答案: