为什么背景滤镜：blur(5px) 破坏了我的设计？

时间：2021-06-30 21:15:23

标签： javascript html css background

今天我在 css backdrop-filter: blur(7px);

中遇到了一个非常奇怪的问题

先看第一个片段

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  /* position: absolute; */
  /* width: 50%; */
  bottom: 150px;
  height: 100px;
  width: 100px;
  /* bottom: 500px; */
  border-radius: initial;
}
<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

如您所见，有 3 个容器。 每个容器都有一个模糊容器 backdrop-filter: blur(7px);

但是第二个容器的模糊元素溢出了父元素。

到目前为止一切正常。

第一件奇怪的事

通过定位绝对并将溢出的容器移向底部，它就在下面 第三个容器模糊元素，而它应该位于该模糊元素的顶部

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  position: absolute;
 bottom: -142px;
  height: 100px;
  width: 100px;
  /* bottom: 500px; */
  border-radius: initial;
}
<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

要查看结果，请根据您的浏览器重新设置 bootom 类的 .bug css 属性

enter image description here

它是怎么过去的

我刚刚从 3 个模糊容器中删除了 backdrop-filter 属性。

enter image description here

要查看结果，请根据您的浏览器重新设置 bootom 类的 .bug css 属性

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  /* -webkit-backdrop-filter: blur(7px); */
  /* backdrop-filter: blur(7px); */
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  position: absolute;
  bottom: 24%;
  height: 100px;
  width: 100px;
  /* bottom: 500px; */
  border-radius: initial;
}
<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

背景过滤器的另一个奇怪之处是 --

使用背景过滤器，溢出元素位于第一个容器的模糊元素的顶部，而不是在其后面

enter image description here

要查看结果，请根据您的浏览器重置 bootom 类的 .bug css 属性 

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: none;
  font-family: "Roboto", sans-serif;
}
p {
  color: white;
}
body {
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.container {
  max-width: 100%;
  width: 550px;
  background-color: #8f656514;
  min-height: 400px;
  margin: auto;
  padding: 15px;
  box-shadow: 0px 0px 8px 0.1px #393939;
  margin: auto;
  /* position: relative; */
  display: flex;
  align-items: center;
  flex-direction: column;
}
.common {
  margin: 35px 0px;
  box-shadow: 0px 3px 5px 0px #7f5b5b;
  padding: 10px 10px;
  width: 100%;
  height: 100px;
  background-color: red;
  /* display: contents; */
}

.in {
  display: flex;
  color: white;
  border-radius: 100px;
  align-items: center;
  padding: 7px 10px;
  background-color: #3a3b3c45;
  /* -webkit-backdrop-filter: blur(7px); */
  backdrop-filter: blur(7px);
  box-shadow: 0px 0px 4px 0.5px #918b90;
  height: 50px;
}

.bug {
  height: 26px;
  background-color: rebeccapurple;
  position: absolute;
  /* bottom: 24%; */
  height: 100px;
  width: 100px;
  bottom: 500px;
  border-radius: initial;
}
<div class="container">
        <div class="one common">
            <p>First Container</p>
            <div class="in">
                <p>blurred container </p>
            </div>
        </div>
        <div class="two common">
            <p>second Container</p>
            <div class="in bug">
                blurred overflow
            </div>
        </div>

        <div class="three common">
            <p>Third Container</p>
            <div class="in ">
                <p>blurred container </p>
            </div>
        </div>
    </div>

我不知道这里发生了什么以及为什么？？？

请帮助我理解这一点

0 个答案:

没有答案
相关问题
最新问题