如何在非重复图像边缘应用具有不透明度的线性梯度等效

Question

像How to do equivalent of a linear-gradient with opacity on a seamless background image in CSS，但不是无缝的背景图像，只是一个常规的旧图像。怎么做同样的事？现在，当我在一个不重复的背景图像上尝试时，整个图像被覆盖在梯度中。

​

div {
  width: 1000px;
  height: 1000px;
  background:
    linear-gradient(to bottom, #fff, transparent) top/5% 32px no-repeat,
    linear-gradient(to top, #fff, transparent) bottom/5% 32px no-repeat,
    url(https://picsum.photos/id/984/1000/1000) no-repeat;
  background-size: cover;
}

<div></div>

​

我所拥有的(上面)是不正确的，图像都是覆盖在梯度之下，而我只是希望边缘(顶部和底部)像32 is覆盖。

Answer 1

将cover移动到图像，否则它将应用于渐变，并覆盖5% 32px

​

div {
  width: 1000px;
  height: 1000px;
  background:
    linear-gradient(to bottom, #fff, transparent) top/100% 32px no-repeat,
    linear-gradient(to top, #fff, transparent) bottom/100% 32px no-repeat,
    url(https://picsum.photos/id/984/1000/1000) center/cover no-repeat;
}

<div></div>

​

或在background-size上指定3个值

​

div {
  width: 1000px;
  height: 1000px;
  background:
    linear-gradient(to bottom, #fff, transparent) top,
    linear-gradient(to top, #fff, transparent) bottom,
    url(https://picsum.photos/id/984/1000/1000);
  background-size:100% 32px,100% 32px,cover;
  background-repeat:no-repeat;
}

<div></div>

​