jquery - CSS/JS : Background image edge gradient to solid background

Question

想象一下网站标题，将此图像作为 div 背景:

我是否可以使用 CSS 和 JS/JQuery 在图像边缘创建一个最终透明的渐变？还是纯色？

我的想法是将渐变应用于背景边缘，然后在其后面应用纯色，从而产生这种效果:

谢谢。

Answer 1

这就是您要找的吗？

.container {
  width: 75vw;
  height: 75vh;
  background: url("/image/DrmAg.jpg");
  position: relative;
}

.container::before,
.container::after {
  position: absolute;
  content: "";
  display: block;
  width: 50px;
  height: 100%;
  top: 0;
}

.container::before {
  background: linear-gradient(to right, rgba(203, 130, 43, 1), rgba(203, 130, 42, 0));
  left: 0;
}

.container::after {
 background: linear-gradient(to left, rgba(203, 130, 43, 1), rgba(203, 130, 42, 0));
  right: 0;
}

<div class="container"></div>