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>

09-10 10:29
查看更多