Question

without blur。 with blur 我是html，css的初学者。我试图模糊每个div的背景图像，但是它会缩小它。如果没有萎缩，我该如何进行模糊？

＆＃13;

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

＆＃13;

  <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>

＆＃13;

Answer 1

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

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

1 个答案: