所以大家，最近我一直在努力弄清楚如何在我的背景图像上获得frostet玻璃效果。事实证明这并不容易，但我认为我非常接近！ 只要你在Fullscreen中使用浏览器，它就可以很好地工作。即使您调整浏览器窗口的宽度，它仍然可以正常工作。但如果你改变它的高度会让人讨厌，因为frostet玻璃部分比实际的背景图像缩小得更快，我不知道如何解决它。有什么建议吗？
非常感谢！
<!DOCTYPE html >
<html>
<head>
<link href="css/test.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<p id="test" class="glass down"> test</p>
</body>
</html>
html, body, .glass {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-image: url('../images/slide/slide2.JPG');
background-size: cover;
}
.glass::before {
display: block;
position: absolute;
top:112.5%; /*diese beiden prozente beschreiben meine lage im vollbild*/
left:-50%;
width: 199%; /*diese beiden prozente beschreiben meine größe*/
height:199%;
background-image: url('../images/slide/slide2.jpg');
filter: blur(5px);
background-size: cover;
content: ' ';
opacity: 0.6;
}
.glass {
background-color: white;
}
.glass.down {
transform: translateY(100%) translateY(-7rem);
}
.glass.down::before {
transform: translateY(-100%) translateY(7rem);
}
.glass.up, .glass.up::before {
transform: translateY(0%);
}
#test {
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%; /*ändert die größe meines ausschnittes */
height: 50%;
z-index: 10000;
}
我希望你能以某种方式帮助我。再次感谢：）