如何设置<div>背景透明度且不影响内部元素？

你的核心问题是给.right设置了opacity: 0.5，这个属性会让容器所有子元素一起继承透明度，所以哪怕你给.elementsOverlay加rgba背景，也会被父元素的opacity覆盖。下面是修正方案：

修正后的代码 #

HTML（仅移除内联背景图） #

<div class="row Home">
      
      <div class="col right">
        <div class="elementsOverlay d-flex justify-content-center align-items-center">
          <div class="d-flex flex-column-reverse">
            <div class="ps-4 mt-4">
              <button type="button" class="btn bookNow">Book Now</button>
            </div>
    
            <div class="ps-4 pt-5 pe-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
              gravida nisl eget massa commodo, condimentum pharetra purus malesuada.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
              convallis id dolor nec dictum. Sed mollis scelerisque condimentum.
              Quisque viverra nisl vel diam hendrerit vestibulum. Cras augue ligula,
              consectetur eu eleifend a, viverra cursus dolor. Fusce gravida et
              lectus ut mollis. Donec pulvinar felis finibus mauris pretium
              efficitur. Donec in dui condimentum nunc tempus ultricies
            </div>
          </div>
        </div>
    </div>

CSS #

.right {
  min-height: 100vh;
  position: relative;
  color: white;
  text-shadow: 2px 2px 2px rgb(47, 45, 45);
  /* 确保内部元素在背景层上方 */
  z-index: 1;
}

/* 用伪元素单独实现背景图的透明度 */
.right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./Images/car-2797169_1280.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  /* 仅给背景图设置透明度 */
  opacity: 0.5;
  /* 把伪元素放在父元素底层 */
  z-index: -1;
}

.elementsOverlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

关键说明 #

1. 移除.right的全局opacity，避免子元素继承透明度
2. 通过::before伪元素单独承载背景图和透明度，伪元素作为底层背景，不会干扰内部元素
3. 给.right设置z-index:1，确保内部内容在伪元素背景上方正常显示
4. 你之前尝试的rgba背景可以正常生效，不再受父元素透明度影响

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