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

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>

我那里(上面)的内容不正确，图像全部被渐变覆盖，而我只想要像 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>