本文最后更新于 1271 天前,其中的信息可能已经有所发展或是发生改变。
CSS
中无法直接给背景图片加opacity
属性,可以使用伪元素的方法实现这种效果。
html {
width: 100vw;
height: 100vh;
position: relative;
}
html::after {
content: "";
background: url(https://api.xiaodongxier.com/bing/);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
html::before {
content: "每日一图 提神醒目";
position: absolute;
bottom: 20px;
right: 20px;
font-size: 20px;
font-family: serif;
color: #393939;
}