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

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

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