html - 如何将渐变应用于响应式(固定宽度)图像？

Question

我不确定如何解释我的问题。所以这是一个 fiddle : 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>