如何删除由 div 背景图像模糊而产生的意外框阴影？
我正在尝试使用该属性模糊 div 的图像filter: blur(<x>px)。我所做的是拥有 3 个 div。第一个 div，在最后面，有一个盒子阴影。中间的第二个 div（均以 z 索引表示）具有模糊图像。最前面的 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>
Qyouu1回答
-
天涯尽头无女友
您可以在 内使用伪元素，#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>
随时随地看视频慕课网APP
相关分类
Html5