【问题标题】: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>

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

【问题讨论】:

  • 你能给我们一个工作的sn-p吗?

标签: css


【解决方案1】:

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

在这里找到解决方案: Add circular fading opacity (vignette effect) to images in CSS

【讨论】:

  • 是的!这是一个,非常感谢您为我指明正确的方向。非常感谢!
猜你喜欢
  • 2015-02-22
  • 1970-01-01
  • 2017-04-06
  • 2011-07-18
  • 1970-01-01
  • 2022-01-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多