CSS - div div div

Question

我在另一个div里面有一个div。 我想给第一个div一个BG和过滤器：模糊（5像素） 但是，在第二个div应该不会受到影响 我已经尝试过

.div1 { 
    background-image: url("https://myimage.com/image.png"); 
    filter: blur(5px) 
} 
.div2 { 
    filter: none !important 
} 

Answer 1

你不能这样做......什么模糊父母模糊了孩子......我假设你只是试图模糊图像......对吧？

你必须使用另一个元素（或伪元素）来保存图像（或背景图像）并模糊它。

Codepen Demo

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    position: relative; 
 
    width: 284px; 
 
    height: 196px; 
 
    margin: 1em auto; 
 
    border: 1px solid red; 
 
    padding: 24px; 
 
    overflow: hidden; 
 
    /* clip any overflowing blur */ 
 
} 
 
.parent::before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(http://www.fillmurray.com/284/196); 
 
    -webkit-filter: blur(5px); 
 
    filter: blur(5px); 
 
    z-index: -1; 
 
    -webkit-transform: scale(1.05); 
 
    transform: scale(1.05); 
 
    /* slight overscale so blur reaches all edges */ 
 
} 
 
.child { 
 
    width: 200px; 
 
    height: 148px; 
 
    margin: auto; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="parent"> 
 
    <div class="child">Lorem ipsum dolor sit.</div> 
 
</div>