无需重构div的CSS网页背景图片透明度设置最简方法求助

以下两种方案均不用改动现有HTML代码，仅修改/新增少量CSS即可生效：

• 方案1：背景层叠加（新手首选，仅需修改2行原有代码）

原理是在背景图片上方叠加一层半透明遮罩，直接通过CSS多背景属性实现，无需额外编写复杂逻辑
把你原有body选择器的代码替换为以下内容即可：

body {    
    background-color: gray;
    /* 逗号前是半透明遮罩，rgba最后一个参数控制遮罩透明度，范围0~1，数值越大遮罩越厚、背景图越淡 */
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images/photo3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    /* 原有代码的background-position: relative是错误属性值，已修正为居中显示 */
    background-position: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

你可以根据文字清晰度需求，调整rgba(0,0,0,0.5)里的最后一个数值，比如想要背景更淡就改成0.6，想要背景更明显就改成0.3。

• 方案2：伪元素方案（适合需要单独调整背景图本身透明度的场景）

之前伪元素失效大概率是缺少定位、层级设置，直接新增以下CSS代码即可生效，原有body里的背景图相关代码记得删除：

body {
    position: relative;
}
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/photo3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* 这里直接控制背景图本身的透明度，范围0~1 */
    opacity: 0.5;
    /* 把背景层放到所有文字下方，避免遮挡内容 */
    z-index: -1;
}

内容的提问来源于stack exchange，提问作者paulnewbie34