怎么样给背景图加透明度

王永杰

2021-5-17 17:10

2022-3-11 23:11

1,000

开发相关

60 字

2 分钟

本文最后更新于 1284 天前，其中的信息可能已经有所发展或是发生改变。

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