CSS 图像晕影效果答案

【问题标题】：CSS Image Vignette effectCSS 图像晕影效果
【发布时间】：2021-04-04 02:33:09
【问题描述】：

所以，我正在尝试使用 CSS 将这种效果应用于图像，它类似于 Vignette 效果，但不仅仅是阴影，边缘逐渐向外溶解到背景中。

我的意思是，就像下面这张图片

我想应用他们在“地图”图像上添加的效果（忽略 Pin 位置），例如这些边缘如何与蓝色背景融为一体。

我尝试过如下使用 Box-shadows

TestImageProp: {
boxShadow: '0 0 200px rgba(0,0,0,0.9) inset',
border: 'none',
height: '700px',
width: '700px'}

和

<div className="TestImageProp">
  <img src={TestImage} alt="ArtBackground" height="700px" width="700px"/>
</div>

但没有得到想要的输出。这就是我得到的

【问题讨论】：

标签： css

【解决方案1】：

对我来说，地图图像看起来好像 不透明度 具有圆形渐变。

【讨论】：