如何将渐变应用于响应式（固定宽度）图像？

Question

我不确定如何解释我的问题。所以这里有一个小提琴： https://jsfiddle.net/8zsqydj0/

.background-img-wrapper:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background-img-wrapper {
  max-width: 1920px;
}

.background:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background {
  width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row justify-content-center position-fixed background">
  <div class="background-img-wrapper">
    <img class="img-fluid" src="https://via.placeholder.com/1920x1080/000000/" />
  </div>
</div>

我正在尝试将渐变应用到图像的三个侧面。我到了这么远。但是，图像以页面为中心并具有 1920 像素的固定（最大）宽度。渐变应用于页面 100% 的父 div，并且图像是 img-fluid。因此，当以 1920 像素或更低的分辨率查看渐变时，一切看起来都很好。但是，当您将页面高于宽度调整为 1920 像素时，渐变会随着窗口的一侧移动，而不是固定在图像的两侧。如果这有意义的话。

那么，如何将渐变应用到图像而不是父 div，或者如何将渐变的边限制为图像大小？我正在使用 Bootstrap 4。

另外，我不一定需要保持当前的结构。如果有更好的方法来实现这一切，请告诉我:)

Answer 1

^{我会将1920px替换为更小的值，以便我们更好地查看结果}

一个简单的解决方法是添加position:relative 并调整z-index，如下所示：

.background-img-wrapper:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgba(252, 252, 252, 1) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background-img-wrapper {
    max-width: 400px;
    position:relative; /* added */
}

.background:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    z-index:1; /* added */
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(252, 252, 252, 1) 100%);
}

.background {
    width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="row justify-content-center position-fixed background">
  <div class="background-img-wrapper">
    <img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
  </div>
</div>

或者像下面这样简化你的代码：

.background:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background: 
     linear-gradient(to bottom, transparent 80%, #fff 100%),
     linear-gradient(to right, #fff 0%, transparent 20%  80%, #fff 100%);
}

.background {
    max-width: 400px;
    left:0;
    right:0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto">
    <img class="img-fluid" src="https://via.placeholder.com/400x300/000000/"/>
</div>

如果图像的比例始终相同，您仍然可以简化：

.background:before {
    content: "";
    padding-top:calc(300/400 * 100%); /* Height/width */
}

.background {
    max-width: 400px;
    left:0;
    right:0;
    background: 
     linear-gradient(to bottom, transparent 80%, #fff 100%),
     linear-gradient(to right, #fff 0%, transparent 20%  80%, #fff 100%),
     url(https://via.placeholder.com/400x300/000000/) center/cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="position-fixed background m-auto d-flex">
</div>