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

Question

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

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

Answer 1

您忘了指定所需的语言，JavaScript，CSS或HTML。对于CSS，您需要代码，但对于CSS，只需键入：

.Background Image {
  filter: blur(20px);
}

这样更容易。但是如果你使用颜色混合，那么你需要模糊更大的图像

您还可以使用文件管理器执行许多其他操作，例如，您可以编辑对比度和阴影。如果您想了解有关过滤器的更多信息，请访问以下网站： Learn More

如果您询问HTML或JavaScript，请发表评论，因为您没有在“问题描述”中写下来。

Answer 2

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

话说回来，你无法实现你想要的效果。为什么？因为在模糊图像时，您会模糊整个图像，而不是位图中存在的特定闪光粒子（您无法做到这一点）。模糊整个图像会产生一种模糊的效果，我想这不是你想要的。

我玩了一些图像，将它们叠在一起，调整了不透明度和滤镜，下面就是我想出来的;看看是否有帮助。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您正在寻找更多，那么您肯定需要一个JavaScript解决方案，因为CSS在这里不会有太大帮助。