html - 如何在 css3 中模糊整个背景图像？

Question

body
{
background-image:url("hamburger.jpg"),url("glitter.png");
background-blend-mode:color-dodge;
filter:blur(5px);
}

我添加了两个背景图像，一个主要的 jpg 图像和另一个具有闪光效果的 png 图像。我正在尝试使用颜色减淡来混合它们，但闪光占主导地位。另外，我需要模糊闪光吗？我尝试模糊图像，但只有文本变得模糊。

Answer 1

我完全得到了你想要在这里实现的目标。是的，您可以通过使用两个单独的元素或借助伪元素将一个背景图像堆叠在另一个之上。

话虽如此，您将无法实现您想要的效果。为什么？因为在模糊图像时，您模糊了整个图像，而不是位图中存在的特定闪光粒子(您无法做到这一点)。整个图像的模糊会产生一种朦胧的效果，我想这不是您想要的。

我尝试了一些图像，将它们一个接一个地堆叠起来，调整了不透明度和滤镜，下面是我想出的结果；看看是否有帮助。

.effect {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-image: url("https://unsplash.it/700/400?image=411");
  display: flex;
  justify-content: center;
  align-items: center;
}

.effect:after {
  position: absolute;
  z-index: 2000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("https://s3.amazonaws.com/spoonflower/public/design_thumbnails/0249/0963/rrrrSparkle_silver_mirror.png") 0 0 no-repeat / cover;
  content: "";
  filter: blur(3px);
  opacity: .35;
}

.effect-inner {
  position: relative;
  z-index: 3000;
}

<div class="effect">
  <div class="effect-inner">
    <h2>CSS is fun!</h2>
  </div>
</div>

如果您正在寻找更多，您肯定需要 JavaScript 解决方案，因为 CSS 在这里帮不上什么忙。