如何在CSS中仅设置背景图片透明度，不影响Grid布局内其他元素？

这个问题太常见了——直接给容器设置opacity会让容器内所有元素（包括文字）都继承这个透明度，这肯定不是你想要的效果。下面给你两种简单有效的解决方案：

方法一：使用伪元素（最推荐） #

通过给.two添加一个伪元素作为独立的背景层，把背景图和透明度放在伪元素上，这样内容层（比如你的标题）就不会受到透明度影响。

修改后的CSS代码：

.grid { 
  display: grid; 
  grid-template-areas: "one two three" "one two three" "one two three"; 
  grid-template-columns: 1fr 2fr 1fr; 
  grid-template-rows: repeat(3, 310px); 
}
.title { 
  font-family: 'Chelsea Market', cursive; 
  font-size: 30px; 
  text-align: center; 
  /* 给标题加深色，让它在半透明背景上更清晰 */
  color: #222;
  /* 确保标题在伪元素背景层上方 */
  position: relative;
  z-index: 1;
}
.one { 
  background-color: tomato; 
  grid-area: one; 
}
.two { 
  grid-area: two; 
  /* 必须设置相对定位，让伪元素相对于它定位 */
  position: relative;
}
/* 伪元素作为独立背景层 */
.two::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(./henry-perks-TStCoAiFjDY-unsplash.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* 仅给背景图设置透明度 */
  opacity: 0.5;
  /* 把背景层放在内容下方 */
  z-index: 0;
}

方法二：使用多层背景（快速实现） #

如果只是想要背景图看起来半透明，也可以用background-image的多层语法，叠加一个半透明的颜色层在背景图上：

修改后的.two CSS：

.two { 
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(./henry-perks-TStCoAiFjDY-unsplash.jpg); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
  grid-area: two; 
}

注意：这个方法是在背景图上叠加了一层半透明的白色（你可以把rgba(255,255,255,0.5)改成其他颜色和透明度），和伪元素的纯背景透明效果略有不同，适合需要给背景图加颜色滤镜的场景。

HTML部分不需要修改，保持你原来的结构就行。

试试上面的方法，就能实现背景图半透明但文字完全清晰的效果啦！

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