Question

由于我无法使背景透明，意味着我希望图像不透明度应该最小，并且应该突出显示在其上的文本。请帮帮我。因为我使用了css不透明度，但整个div变得透明，文本也写在上面。

这是我的html和css：

＆＃13;

+----+-----+-----+---------+
| A  | B   | C   |id       |
+----+-----+-----+---------+
| A  | B   | C   | 1       |
| A  | B   | C   | 2       |
| A  | B   | C   | 3       |
| A  | B   | C   | 4       |
+----+-----+-----+---------+

＆＃13;

.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;
}

＆＃13;

Answer 1

我认为这就是你所需要的。我们可以通过使用伪类来实现后台透明。请检查以下代码。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

如何使背景图像透明，并应突出显示在其上的文字

2 个答案: