CSS / JS：背景图像边缘渐变到纯色背景

Question

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

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

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

谢谢。

Answer 1

这是你在找什么？

.container {
  width: 75vw;
  height: 75vh;
  background: url("https://i.stack.imgur.com/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>