This question already has answers here:
How to apply a CSS filter to a background image
(15个答案)
22天前关闭。
我想模糊
(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>