如何删除由 div 的背景图像模糊造成的意外框阴影？

Question

我正在尝试使用filter: blur(<x>px)属性filter: blur(<x>px) div 的图像。 我所做的是拥有 3 个 div。 最后面的第一个 div 有一个盒子阴影。 中间的第二个 div（均以 z-index 表示）具有模糊图像。 最前面的 div 有文字。

我在某种程度上达到了我想要的效果，但是，问题是模糊的背景图像在 div 的边界周围产生了框阴影效果。 我想要的是模糊的图像只在其 div 的边界上，并且只有最后面的 div 的框阴影效果。

示例（查看整页以查看 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>

Answer 1

您可以在#middle_div使用伪元素，然后将overflow: hidden到#middle_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 { 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>