我正在嘗試使用該屬性模糊 div 的圖像filter: blur(<x>px)。我所做的是擁有 3 個(gè) div。第一個(gè) div，在最后面，有一個(gè)盒子陰影。中間的第二個(gè) div（均以 z 索引表示）具有模糊圖像。最前面的 div 有文本。我已經(jīng)在一定程度上達(dá)到了我想要的效果，但是，問題是模糊的背景圖像在 div 邊框周圍創(chuàng)建了一個(gè)盒子陰影效果。我想要的是僅在其 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>
1 回答
天涯盡頭無女友
TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可以在 內(nèi)使用偽元素，#middle_div然后應(yīng)用于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>
- 1 回答
- 0 關(guān)注
- 174 瀏覽
添加回答
舉報(bào)
0/150
提交
取消