如何在卡片中正确拟合带有模糊的背景图像？

Posted 2023-03-28

【中文标题】如何在卡片中正确拟合带有模糊的背景图像？

【英文标题】：How can I fit properly a background image with a blur in a card?

【发布时间】：2021-08-26 11:39:25

【问题描述】：

我是 CSS 的新手。我想做一张里面有一点背景的卡片。

但是，我已经看到我必须创建一个只有图像的新 div，并且它的样式块必须包含 -webkit-filter: blur(8px);

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

我不确定我的代码是否有帮助，但这里有一个 sn-p：

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

提前致谢！

【问题讨论】：

也许你可以将模糊的图像再缩放一点，并调整元素的位置，这样模糊的边缘就会从容器中流出。然后你可以在.card-body元素上设置一些overflow: hidden; CSS来隐藏溢出的部分？

@JWGeertsma 我不知道overflow: hidden; 结果，随着规模的增加，显然很好，对我有很大帮助！谢谢！

【参考方案1】：

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

溢出：隐藏将隐藏所有会从容器中取出的部分。这样，模糊的边缘将永远不可见，您的效果应该会起作用。