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

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

div{
宽度：1000px；
高度：1000px；
背景：
线性渐变（至底部，#fff，透明）顶部/5%32px无重复，
线性渐变（至顶部，#fff，透明）底部/5%32px无重复，
网址(https://picsum.photos/id/984/1000/1000)不重复；
背景尺寸：封面；
}

---

仅将

封面

移动到图像，否则它将应用到渐变，并覆盖

5%32px

div{
宽度：1000px；
高度：1000px；
背景：
线性渐变（至底部，#fff，透明）顶部/100%32px无重复，
线性渐变（至顶部，#fff，透明）底部/100%32px无重复，
网址(https://picsum.photos/id/984/1000/1000)中心/盖不重复；
}

---

您正在应用封面，这将影响渐变。我希望图像填充空间，但边缘渐变淡出为透明，但在CSS中是可能的（如果在CSS中不可能，则为JS）。