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>