我怎样才能正确地适应卡片中模糊的背景图像？

Question

我是 CSS 的新手。我想制作一张卡片，里面有一点模糊的背景。

但是，我发现我必须创建一个新的 div，只有图像及其样式块必须包含 -webkit-filter: blur(8px);

但我对这种方式并不满意，因为背景图像无法正确放入卡中，并且部分模糊图像溢出到卡的边框上。

我不确定我的代码是否有帮助，但这里有一个片段：

.card {
  padding-top: 66.6%;
  border-radius: 0.8rem;
}

.bg-image {
  background-image: radial-gradient(rgba(230, 230, 230, 0.3), rgba(39, 39, 72, 0.2)), url("images/prototype.png");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  position: absolute;
  margin-top: -72.5%;
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.toolsButton .card {
  background: transparent;
  cursor: pointer;
  transition: all 250ms ease;
  transform: scale(1);
  border: solid 3px #272748;
}

.toolsButton:hover .card {
  background: transparent;
  transition: all 250ms ease;
  transform: scale(1.05);
  border: solid 3px #272748;
}

.toolsButton:active .card {
  background: transparent;
  transition: all 150ms ease;
  transform: scale(1.1);
  border: solid 3px #272748;
}

<div class="row justify-content-around">
  <div class="col-9 col-xl-5 col-md-5 text-center toolsButton">
    <form action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
      <div class="card">
        <div class="card-body pt-3 row justify-content-center" style="height:fit-content;">
          <div class="bg-image"></div>
          <div class="col">
            <span><?php echo $content; ?></span>
          </div>
        </div>
        <input type="SUBMIT" name="app" value="<?php echo $content; ?>" style="opacity: 0">
      </div>
    </form>
  </div>

提前致谢！

Answer 1

您可以缩放模糊图像，使其变大一点。如果你也改变位置，那么模糊的边缘可能在父元素之外。然后，您可以在 .card-body 元素的 CSS 中添加 overflow: hidden; 以隐藏溢出部分。

那个 overflow: hidden 将隐藏所有会从容器中出来的部分。这样，模糊的边缘将永远不可见，您的效果应该会起作用。

我怎样才能正确地适应卡片中模糊的背景图像？

How can I fit properly a background image with a blur in a card?

html

css

blur

card