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

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>

我正在尝试将渐变应用于图像的三个侧面。我走到了那一步。但是，图像在页面上居中，并且具有 1920px 的固定(最大(宽度。渐变应用于占页面 100% 的父div，并且图像是 img 流体。因此，当以 1920px 或更低的分辨率查看渐变时，一切看起来都很好。但是，当您将页面大小调整到 1920 像素以上时，渐变会随窗口一侧移动，而不是固定在图像的两侧。如果这是有道理的。

那么，如何将渐变应用于图像而不是父div，或者如何将渐变的边限制为图像大小？我正在使用引导程序 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>