html - 模糊背景图像缩小它，如何在不缩小的情况下模糊？

Question

without blur . with blur 我是 html、css 的初学者。我试图模糊我的每个 div 的背景图像，但它反而缩小了它。如何在不缩小的情况下进行模糊处理？

.parallax {
  /*height: 500px;*/
  height: 100vh;
  font-size: 200%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px;
  perspective-origin-x: 100%;
}
.parallax .title {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  color: #424242 black;
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* below trying to blur */

.parallax .group2 .back {
  background: #ffdfba;
  background-image: url("image/bubble.png");
  background-size:contain;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  height: 500px;
  height: 100vh;
}

  <div class="group group2">
          <div class="layer base">
              <div class="title">
                  Blowing Bubbles are fun! They help calm yourself and give you qualities to breath.
              </div>
          </div>
          <div class="layer back">
              <div class="title">

              </div>
          </div>
      </div>

Answer 1

对 .parallax .group2 .back 使用 background-size: cover。背景图像将覆盖整个 div 区域。 希望对你有帮助