如何设置背景图片低透明度同时高亮其上文字？

嗨，我完全懂你的困扰——直接给容器加opacity属性会把里面的所有内容（包括文字）都变得透明，这可不是我们想要的效果。别担心，咱们用CSS伪元素就能完美解决这个问题，让背景图片单独透明，文字保持清晰高亮！

核心思路 #

给.bgimg容器设置相对定位，然后用::before伪元素来承载背景图片，给伪元素添加透明度并把它放到内容的下方（通过z-index控制），这样就不会影响容器内的文字和导航了。

修改后的完整代码 #

CSS 代码 #

.bgimg{
  position: relative;
  width: 100%;
  height: 600px;
}
/* 用伪元素实现透明背景图 */
.bgimg::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('bg2.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.2; /* 这里可以调整透明度，0=完全透明，1=不透明 */
  z-index: -1; /* 把背景图放到所有内容的下方 */
}

.headerset{
  padding-top: 250px;
  box-sizing: border-box;
}
.headerset h2{
  font-size: 40px;
  color: black;
  /* 可选：给文字加阴影，让它在透明背景上更突出 */
  text-shadow: 0 0 3px rgba(255,255,255,0.8);
}
.headerset h1{
  font-size: 82px;
  font-weight: bold;
  color: black;
  text-shadow: 0 0 5px rgba(255,255,255,0.8);
}

HTML 代码（无需修改，保持你原来的即可） #

<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="hover.css" media="all">
<div class="bgimg">
  <nav class="navbar navbar-expand-md navbar-dark nav fixed-top" style="background-color: #D7DBDD">
    <div class="container" style="height: 50px">
      <a href="" class="navbar-brand font-italic font-weight-bold" style="font-size: 40px; font-family: Helvetica Neue;">TheCureKit</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse text-center" id="collapsenavbar">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a href="" class="nav-link text-white hvr-underline-from-center">Book Appointment</a>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link text-white hvr-underline-from-center">Book Tests</a>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link text-white hvr-underline-from-center">Order Medicines</a>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link text-white hvr-underline-from-center">Login|signup</a>
          </li>
          <li class="nav-item">
            <a href="" class="nav-link text-white hvr-underline-from-center">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container text-center headerset">
    <h2>Welcome to our studio</h2>
    <h1>IT'S NICE TO MEET YOU</h1>
    <button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>
  </div>
</div>

额外优化建议 #

• 调整opacity值来控制背景图片的透明程度，比如0.2就是20%不透明度，数值越小越透明。
• 给文字添加text-shadow属性可以让文字在透明背景上更醒目，我已经在代码里加了示例，你可以根据自己的需求调整阴影的颜色和模糊度。
• 你的导航栏用了fixed-top，已经设置了背景色，所以不会被透明背景影响，完全没问题。

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