Question

我想模糊div元素内的背景图像，但它反映了button和div元素的整个对象。我该如何解决？

<div class="item active"  style="background-image: url(../resources/thy-logo/motor.jpeg); ">

Answer 1

为了使背景图像模糊，您可以使用:before为-1的z-index伪属性，并且应该会很好。

也可以根据需要添加基于active类的伪类。

这是一种无需太多麻烦的方法：）

.bg {
  height: 300px;
  background-repeat: no-repeat;
  position: relative;
  font-size: 48px;
  display: flex;
  align-items: flex-end;
}

.bg::before {
  content: '';
  filter: blur(3px);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('http://placehold.it/400x300');
  z-index: -1;
}

<div class="bg">
  This is the content
</div>

Answer 2

当您将filter: blur()应用于元素时，该元素内的所有内容都会变得模糊，因为整个元素和内容都被视为要处理的单个图像。换句话说，以下操作无效：

<div style="filter:blur(4px);">
  <button style="filter:blur(0);">Click me</button>
</div>

也就是说，您无法在<div>内部的元素上设置模糊滤镜。为了获得我认为的效果，您需要将内容与<div>本身分开：

<div style="position:relative">
  <div style="filter: blur(4px); position: absolute; width: 100%; height: 80px; background: grey;">
  </div>
  <div style="position: absolute; left: 20px; top: 20px;">
    <button>Click me</button>  
  </div>
</div>

在这里，您使用具有相对位置的父级<div>充当包装程序，并使用基础的<div>对其应用过滤器。最重要的是，您放置了另一个<div>，其内容不得模糊。

css仅使div元素中的背景图像模糊

2 个答案: