我正在尝试在非矩形元素上创建磨砂玻璃效果,但效果不佳。我遇到了一个奇怪的问题,我似乎无法解决问题……
通过在文档主体上设置固定的背景图像,向元素添加部分透明的背景色并使用相同的固定背景图像创建:: before伪元素,然后应用模糊滤镜。像这样:
body {
background: url(bg-lanterns.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(bg-lanterns.jpg) 0 / cover fixed;
filter: blur(10px);
}
使用clip-path
来创建非矩形元素也很容易:
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
但是尝试将这两种效果结合使用会破坏堆叠顺序,并导致:: before元素出现在白色背景上方。
我在Chrome和Firefox中得到相同的结果,所以我想知道这是否是预期的行为,而我只是做错了什么...有人可以阐明这里发生的事情吗?
这是现场演示:
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
padding: 1rem;
height: 600px;
width: 800px;
background: rgba(255,255,255,0.7);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1rem;
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
<main></main>
答案 0 :(得分:1)
根据clip-path
的规范:
计算出的值除“ none”以外的所有值都会导致创建堆栈上下文[CSS21],与创建CSS opacity [CSS3COLOR]而不是1的方法相同。
我设法通过将白色添加到:: after伪元素并剪切两个伪元素而不是元素本身来实现所需的效果。
body {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
}
main {
position: relative;
margin: 1rem auto;
height: 600px;
width: 800px;
display: flex;
flex-flow: column nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
main::before,
main::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
main::before {
background: url(https://i.imgur.com/y1TH8fR.jpg) 0 / cover fixed;
filter: blur(10px);
}
main::after {
background: rgba(255,255,255,0.7);
}
<main> <span> test </span> </main>