背景图像渐变淡出

Question

我有一个容器 div，里面有一个背景图像（可变高度）和一个图块。背景图像应始终全宽可见。在小型设备上，它应该有渐变为白色。

如何实现这样的渐变？

这是我目前的代码：

.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