CSS - Div innerhalb Div Unschärfe

Question

Ich habe ein div in einem anderen Div. Ich möchte die erste div ein BG und einen Filter geben: blur (5px) Aber sollte die zweite div nicht ich schon versucht

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

Answer 1

Sie tun können, das nicht betroffen sein ... was Unschärfen der Elternteil verwischt das Kind .... Ich nehme an, Sie versuchen nur, das Bild zu verwischen ... richtig?

Sie müssen ein anderes Element (oder Pseudo-Element) verwenden, um das Bild (oder das Hintergrundbild) aufzunehmen und zu verwischen.

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>