How do I remove the unintended box shadow made from blurring background image of div?
Question
I am trying to have an image of a div blurred using the filter: blur(<x>px) property. What I have done is to have 3 divs. The first div, at the very back, has a box-shadow. The second div, in the middle (all in terms of z-index), has the blurred imaged. The very front div has the text.
I have somewhat achieved the effect I wanted, however, the problem is that the blurred background image sort of created a box-shadow effect around the border of the divs. What I want is to have the blurred image only on up to the borders of its div and only have the box-shadow effect from the very back div.
Example (view full page to view the div):
#last_div, #middle_div, #front_div { top: 240px; border-radius: 10px; width: 700px; height: 300px; position: absolute; left: 50%; transform: translate(-50%, 0); } #last_div { box-shadow: 0px 0px 60px -30px rgba(0, 0, 0, 0.75); background-color: transparent; z-index: 0; } #middle_div { background-image: url("https://mattamyhomes.com/~/media/images/mattamywebsite/corp/home/heroslideshow/usa/orlando/orl_geohero_04_1600x800.jpg"); background-repeat: no-repeat; background-size: 1000px auto; filter: blur(30px); z-index: -1; } #front_div { color: white; background-color: transparent; display: flex; align-items: center; justify-content: center; font-size: 40px; font-family: 'Arial'; z-index: 1; }
<!DOCTYPE html> <html> <body> <div id="last_div"></div> <div id="middle_div"></div> <div id="front_div"> <div>This is some text</div> </div> </body> </html>
1 answers
solution1
1 ACCPTED 2020-03-31 01:17:26
You could use a pseudo element inside the #middle_div and then apply overflow: hidden to the #middle_div , thus hiding the overflow from it's child elements.
#last_div, #middle_div, #front_div { top: 240px; border-radius: 10px; width: 700px; height: 300px; position: absolute; left: 50%; transform: translate(-50%, 0); } #last_div { box-shadow: 0px 0px 60px -30px rgba(0, 0, 0, 0.75); background-color: transparent; z-index: 0; } #middle_div { overflow: hidden; z-index: -1; } #middle_div::after { background-image: url("https://mattamyhomes.com/~/media/images/mattamywebsite/corp/home/heroslideshow/usa/orlando/orl_geohero_04_1600x800.jpg"); background-repeat: no-repeat; background-size: 1000px auto; bottom: 0; content: ''; filter: blur(30px); left: 0; position: absolute; right: 0; top: 0; } #front_div { color: white; background-color: transparent; display: flex; align-items: center; justify-content: center; font-size: 40px; font-family: 'Arial'; z-index: 1; }
<!DOCTYPE html> <html> <body> <div id="last_div"></div> <div id="middle_div"></div> <div id="front_div"> <div>This is some text</div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.