html - 如何使背景图像透明，上面写的文字应该突出显示

Question

由于我无法使背景透明，这意味着我希望图像不透明度应该最小，并且上面写的文字应该突出显示。请帮我解决这个问题。当我使用 css opacity 时，整个 div 变得透明，上面还写着文字。

这是我的 html 和 css:

.bgimg{
     background: url('bg2.jpg'); 
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     width: 100%;
     height: 600px;     
} 
 
.headerset{
    padding-top: 250px;
	  box-sizing: border-box;
}

.headerset h2{
  	font-size: 40px;
}

.headerset h1{
  	font-size: 82px;
	  font-weight: bold;
}

<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 style="color: black;">Welcome to our studio</h2>
    <h1 style="color: black;">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>

Answer 1

我认为这就是您所需要的。我们可以使用伪类实现背景透明。请检查以下代码。

.bgimg{

 width: 100%;
 height: 600px;

 } 
 .bgimg::after {
  content: "";
  background: url('https://images.pexels.com/photos/137219/pexels-photo-137219.jpeg?auto=compress&cs=tinysrgb&h=350');
   background-size: cover;
 background-position: center;
 background-attachment: fixed;
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}


.headerset{
padding-top: 250px;
box-sizing: border-box;
}

.headerset h2{
font-size: 40px;
}

.headerset h1{
font-size: 82px;
font-weight: bold;
}

<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 style="color: black;">Welcome to our studio</h2>
        <h1 style="color: black;">IT'S NICE TO MEET YOU</h1>
        <button class="btn btn-warning text-white btn-lg" style="margin-bottom: 10px;">BOOK NOW</button>

    </div>