如何删除由 div 的背景图像模糊造成的意外框阴影？
[英]How do I remove the unintended box shadow made from blurring background image of div?
问题描述
I am trying to have an image of a div blurred using the filter: blur(<x>px) property.
我正在尝试使用filter: blur(<x>px)属性filter: blur(<x>px) div 的图像。 What I have done is to have 3 divs.我所做的是拥有 3 个 div。 The first div, at the very back, has a box-shadow.最后面的第一个 div 有一个盒子阴影。 The second div, in the middle (all in terms of z-index), has the blurred imaged.中间的第二个 div（均以 z-index 表示）具有模糊图像。 The very front div has the text.最前面的 div 有文字。
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.我在某种程度上达到了我想要的效果，但是，问题是模糊的背景图像在 div 的边界周围产生了框阴影效果。 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.我想要的是模糊的图像只在其 div 的边界上，并且只有最后面的 div 的框阴影效果。
Example (view full page to view the 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 个解决方案
解决方案1
1 已采纳 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.您可以在#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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.