Html 将文本和按钮放置在图像上的特定位置_Html_Css_Web_Web Deployment_Bootstrap 4

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

html css web bootstrap-4

Html 将文本和按钮放置在图像上的特定位置,html,css,web,web-deployment,bootstrap-4,Html,Css,Web,Web Deployment,Bootstrap 4,我想在图像上（h1）中放置一个文本，但它受图像不透明度的影响，因此如何使其不受其影响，我也想将按钮直接放置在文本下方，但它位于图像下方。第三个问题是导航栏和div（文本和图像）之间存在空白，如屏幕截图所示` @导入url（'https://fonts.googleapis.com/css?family=Quicksand:300,400'); 身体{ 字体系列：“流沙”，无衬线；宽度：100%； } .容器液体{ 宽度：100%；填充：0px； } #上割台{ 文本对齐：居中；背景：48

我想在图像上（h1）中放置一个文本，但它受图像不透明度的影响，因此如何使其不受其影响，我也想将按钮直接放置在文本下方，但它位于图像下方。第三个问题是导航栏和div（文本和图像）之间存在空白，如屏幕截图所示`

@导入url（'https://fonts.googleapis.com/css?family=Quicksand:300,400');
身体{
字体系列：“流沙”，无衬线；
宽度：100%；
}
.容器液体{
宽度：100%；
填充：0px；
}
#上割台{
文本对齐：居中；
背景：48万；
}
.内部{
最大宽度：960像素；
保证金：0自动；
最小高度：50px；
}
.导航a{
显示：块；
填充：8px；
颜色：白色；
填充顶部：15px；
}
.txt{
最高：32%；
左：15%；
字体大小：2.5vw；
颜色：绿色；
字体大小：粗体；
}
.主img{
不透明度：0.5；
宽度：100%；
z指数：-1；
}
.btn{
最高：40%；
左：20%；
}


我们知道如何完成你的工作

首先，您需要将z索引添加到您想要在顶部的图层以及图像中，这将解决您的

不透明度问题
第二，第三，您需要更改位于顶部或底部的元素的位置，例如，我已将绝对位置添加到.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>


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