时间戳

首页 > 解决方案 > 在这个超级简单的示例中，如何模糊黑框/边框？

html - 在这个超级简单的示例中，如何模糊黑框/边框？

问题描述

我要做的就是用一个会模糊背景图像的框替换黑框。这是我的网页的过度简化版本。如果我能纠正这段代码，我就能弄清楚其余的。

这是我的示例和代码： https ://jsfiddle.net/no_u_turn/8ymc7xeb/1/

body {
  background-image:url('https://i.ibb.co/DKtSK1h/background-image.jpg');
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

.top-box {
  width:100%;
  height:600px;
  text-align:center;
  padding-top:100px;
}

.blur-background-box {
  width:300px;
  height:300px;
  background-color:black;
  /*filter:blur(5px);*/
  margin:0 auto;
  padding-top:50px;
}

.solid-white-box {
  width:200px;
  height:200px;
  background-color:white;
  margin:0 auto;
}

.bottom-box {
  width:100%;
  height:1000px;
  background-color:white;
}
<div class="top-box">
    <div class="blur-background-box">
        <div class="solid-white-box">
        </div>
    </div>
</div>
<div class="bottom-box">
</div>

哦，是的，我只需要在 CSS 中完成，不需要 JavaScript。基本上，我需要代码可以在所有浏览器和所有设备上工作。

我会整晚都在做这件事。欢迎任何和所有建议！提前谢谢。

标签： htmlcss

解决方案

由于您正在使用background-attachment:fixed;，因此您可以在黑匣子上应用相同的背景，您将获得所需的效果。为避免内容模糊，请使用伪元素：

body {
  background-image:url('https://i.ibb.co/DKtSK1h/background-image.jpg');
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

.top-box {
  width:100%;
  height:600px;
  text-align:center;
  padding-top:100px;
}

.blur-background-box {
  width:300px;
  height:300px;
  margin:0 auto;
  padding-top:50px;
  position:relative;
  z-index:0;
}
.blur-background-box:before {
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-image:url('https://i.ibb.co/DKtSK1h/background-image.jpg');
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(5px);
}

.solid-white-box {
  width:200px;
  height:200px;
  background-color:white;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.bottom-box {
  width:100%;
  height:1000px;
  background-color:white;
}
<div class="top-box">
    <div class="blur-background-box">
        <div class="solid-white-box">
        </div>
    </div>
</div>
<div class="bottom-box">
</div>

推荐阅读