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

Question

与相似，但没有 无缝背景图片 ，只是普通的旧图片。如何做同样的事情？现在，当我在非重复背景图像上尝试时，整个图像都被渐变覆盖。

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>

我那里（上面）的内容不正确，图像全部被渐变覆盖，而我只想要像 32px 那样的边缘（顶部和底部）被覆盖。

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>

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

How to apply equivalent of linear-gradient with opacity on edges of non-repeated image

css

background-image

linear-gradients