css - CSS仅会使div元素中的背景图片模糊

Question

This question already has answers here:

How to apply a CSS filter to a background image
                                
                                    （15个答案）
                                
                        
                                22天前关闭。
            
                    
我想模糊 div元素内的背景图像，但它反映了button和div元素的整个对象。我该如何解决？

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

最佳答案

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

也可以根据需要添加基于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>

关于css - CSS仅会使div元素中的背景图片模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59454106/

上一篇：css - 如何在不使用 JavaScript 的情况下从上一个 svg 动画状态进行补间？

下一篇：html - 使用 HTML <div> 标记时，为属性指定值而不是属性名称的结果是什么？见说明中的例子

Answer 1

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

也可以根据需要添加基于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>