gpt4 book ai didi

html - "Fog over"图像无处不在,但在带有 CSS 的 div 下

转载 作者:行者123 更新时间:2023-11-28 03:07:03 24 4
gpt4 key购买 nike

<分区>

我想实现类似于此处显示的效果:

enter image description here

图层顺序如下:

  1. 背景
  2. 圈子
  3. 白色覆盖
  4. 盒子
  5. 正文

很简单,除了盒子应该取消白色覆盖层,使圆圈更清晰。

层不必完全是那样,其他东西可能会起作用。

如果有所不同,圆圈实际上是一个.png图像;盒子一个div。此外,盒子会有圆 Angular 。

“清除”框是 width: 100% of 67vw,因此这需要是动态的。此外,“雾化”部分只需要在圆圈上,这实际上是一个 png 图像。该图像会根据屏幕尺寸等因素四处移动,因此任何一个的固定位置都不起作用。

这个想法的灵感来自 mbhs.edu ,可以看到我要描述的效果,那里有一个圆形海豹的图像——不,不是动物——被“模糊”了;图像本身具有低对比度和高亮度。然后,在这张图片之上,还有第二张图片。第二张图片没有“模糊”——它是第一张的一部分,只是没有对比度/颜色变化。第二张图片被放置在如上所示的盒子上,以产生我正在寻找的效果。我只想知道是否有某种方法可以做到这一点,而不是使用 2 张图片,而是使用一个和 CSS。

如果这仅适用于 CSS,我会非常喜欢它,因为我对 JS/JQ 几乎一无所知,但是,如果需要它们,那就这样吧。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com