Question

我想在图像上的（h1）中放置一个文本，但它受到图像不透明度的影响，所以我怎么能让它不受它的影响，我还想把按钮直接放在文本下面但是它位于图像下方。第三个问题是导航栏和（文本和图像）的div之间有一个空白区域，如屏幕截图“screenshot of the webpage

中所示

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400');

body{
    font-family: 'Quicksand', sans-serif;
    width: 100%;
}

.container-fluid {
    width: 100%;
    padding: 0px;
    
}

#top-header {
    text-align: center;
    background: #480000 ;
}
    
.inner {
  
  max-width:960px;
  margin: 0 auto;
  min-height: 50px;
}

.nav a {
    
    display: block;
    padding: 8px;
    color: white;
    padding-top: 15px;
}

.txt{

    top: 32%;
    left: 15%;
    font-size: 2.5vw;
    color: green;
    font-weight: bolder;
}

.main-img {
    opacity: 0.5;
    width: 100%;
    z-index: -1;
}


.btn {
    top: 40%;
    left: 20%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE-edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
      <title></title>
      <link href="https://fonts.googleapis.com/css?family=Lato:300,400&amp;subset=latin-ext" rel="stylesheet">
      <link rel="stylesheet" href="stylesheet/style.css">
  </head>

  <body>
    <div class="container-fluid">
        <div class="row header row-fluid" id="top-header">
           <div class="inner">
               <nav class="nav topnav">
                <a href="#home">Home</a>
                <a href="#protfolio">Protfolio</a>
                <a href="#service">Serviice</a>
                <a href="#contact">Contact</a>
                <a href="#about">About</a>
               </nav>
            </div>
        </div>
        
        <div class="container-fluid main-div">
            <div class="row">
                <div>
                    <h1 class="txt col-md-4">We Know how to get your Job done</h1>
                    <img  class="img-fluid main-img" src="images/12.jpg" alt="main-image">
                    <a class="btn btn-primary" href="#">Pro</a>
                </div>
            </div>
            
        </div>
    </div>

 
      
  </body>

</html>

提前谢谢

Answer 1

首先，你需要为你想要拥有的图层添加z-index以及图像，这将解决你的opacity问题，

第二，第三，您需要更改位于顶部或位于底部的元素的position。我已将绝对位置添加到.btn和.txt

更新：如果您将css和html更改为以下内容，您将看到希望的结果：

@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400');

body{
    font-family: 'Quicksand', sans-serif;
    width: 100%;
}

.container-fluid {
    width: 100%;
    padding: 0px;

}

#top-header {
    text-align: center;
    background: #480000 ;
}

.inner {

  max-width:960px;
  margin: 0 auto;
  min-height: 50px;
}

.nav a {

    display: block;
    padding: 8px;
    color: white;
    padding-top: 15px;
}

.txtbutton {
    position: absolute;
    left: 20%;
    top: 5rem;
    z-index: 100;
}

.txt{
    font-size: 2.5vw;
    color: green;
    font-weight: bolder;
    z-index: 100;
    max-width: 100%;
}

.main-img {
    opacity: 0.5;
    width: 100%;
    z-index: 0;
}


.btn {
    display: block;
    z-index: 100;
    font-size: 2.5vw;
    line-height: 2.5vw;
    width: 10vw;
    margin-left: 40%;
}

html：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE-edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
      <title></title>
      <link href="https://fonts.googleapis.com/css?family=Lato:300,400&amp;subset=latin-ext" rel="stylesheet">
      <link rel="stylesheet" href="stylesheet/style.css">
  </head>

  <body>
    <div class="container-fluid">
        <div class="row header row-fluid" id="top-header">
           <div class="inner">
               <nav class="nav topnav">
                <a href="#home">Home</a>
                <a href="#protfolio">Protfolio</a>
                <a href="#service">Serviice</a>
                <a href="#contact">Contact</a>
                <a href="#about">About</a>
               </nav>
            </div>
        </div>

        <div class="container-fluid main-div">
            <div class="row">
                <div style = 'width:100%;'>
                  <div class = 'txtbutton'>
                    <h1 class="txt col-md-4">We Know how to get your Job done</h1>
                    <a class="btn btn-primary" href="#">Pro</a>
                  </div>
                    <img  class="img-fluid main-img" src="images/12.jpg" alt="main-image">

                </div>
            </div>

        </div>
    </div>



  </body>

</html>

在图像上的特定位置放置文本和按钮

1 个答案: