怎么样给背景图加透明度 - 小东西儿

怎么样给背景图加透明度

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;
}