将文本和按钮定位在图像上的特定位置
Posted
技术标签:
【中文标题】将文本和按钮定位在图像上的特定位置【英文标题】：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&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" >
<a class="btn btn-primary" href="#">Pro</a>
</div>
</div>
</div>
</div>
</body>
</html>提前谢谢你
【问题讨论】：
【参考方案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&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" >
</div>
</div>
</div>
</div>
</body>
</html>
【讨论】：
谢谢你的回答，我按照你上面提到的做了，这很有帮助，但我遇到了另一个问题，当我使用绝对位置并调整窗口大小时，文本和底部移动到另一个位置显示在此屏幕截图中link 右侧还有一个额外的空白，我试图更改位置值但我仍然遇到同样的问题 要摆脱空白，您需要将父 div 的width 设为 100%，要摆脱调整大小问题，最好将按钮和文本包装在 div 中，如以及正确的按钮和文本，请参阅更新 CSS 和 html 文件以上是关于将文本和按钮定位在图像上的特定位置的主要内容，如果未能解决你的问题，请参考以下文章