About css
Hello everyone, I would like to achieve the effect of making the entire page's application and category boxes transparent or with a frosted glass texture. How should I set the CSS for this? This is how I've set it up, but it's not working. Could you please provide me with a successful code reference to look at?
/* 设置背景图片 /
body {
background-image: url("https://img.ptdream.net/o/ptdream-img/2023/08/28/64ec101ea6993.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
/ 可选：如果需要更多的背景样式，可以在这里添加其他属性 /
}
.tile {
position: relative; / 使::before伪元素相对于.tile元素定位 /
overflow: hidden; / 隐藏伪元素超出.tile边界的部分 /
}
.tile::before {
content: "";
position: absolute; / 绝对定位，覆盖.tile元素 /
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://img.ptdream.net/o/ptdream-img/2023/08/28/64ec101ea6993.png");
background-size: cover; / 覆盖整个.tile元素 /
backdrop-filter: blur(10px); / 使用模糊效果 /
opacity: 0.7; / 背景图片透明度 /
z-index: -1; / 将伪元素放在.tile元素底下 */
}
/* 设置背景图片 /
body {
background-image: url("https://img.ptdream.net/o/ptdream-img/2023/08/28/64ec101ea6993.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
/ 可选：如果需要更多的背景样式，可以在这里添加其他属性 /
}
.tile {
position: relative; / 使::before伪元素相对于.tile元素定位 /
overflow: hidden; / 隐藏伪元素超出.tile边界的部分 /
}
.tile::before {
content: "";
position: absolute; / 绝对定位，覆盖.tile元素 /
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("https://img.ptdream.net/o/ptdream-img/2023/08/28/64ec101ea6993.png");
background-size: cover; / 覆盖整个.tile元素 /
backdrop-filter: blur(10px); / 使用模糊效果 /
opacity: 0.7; / 背景图片透明度 /
z-index: -1; / 将伪元素放在.tile元素底下 */
}
