将文本和按钮定位在图像上的特定位置答案

【问题标题】：Postioning text and button in a specific position over an image将文本和按钮定位在图像上的特定位置
【发布时间】：2018-04-09 14:59:15
【问题描述】：

我想在图像上的 (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>

提前谢谢你

【问题讨论】：

标签： html css web web-deployment bootstrap-4

【解决方案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>

【讨论】：

谢谢你的回答，我按照你上面提到的做了，这很有帮助，但我遇到了另一个问题，当我使用绝对位置并调整窗口大小时，文本和底部移动到另一个位置显示在此屏幕截图中link 右侧还有一个额外的空白，我试图更改位置值但我仍然遇到同样的问题
要摆脱空白，您需要将父 div 的 width 设为 100%，要摆脱调整大小问题，最好将按钮和文本包装在 div 中，如以及正确的按钮和文本，请参阅更新 CSS 和 html 文件