Question

我想添加一些将鼠标悬停在图片上的框。

我尝试了很多方法，但是无法达到预期的效果（an image of the desired result）。

这是我的HTML代码：

<img src="F:\Theme Development\New folder\6592.jpg" style="position:absolute;" class="img-fluid" alt="Responsive image">
<div class="row">
  <div class="text-right col-md-3 offset-md-3 left-block">
    <h4>Easiest way to fint the job</h4>
    <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
    <a href="#" class="btn btn-primary"> Find Job</a>
  </div>
  <div class="text-right right-block col-md-3 col-md-3">
    <h4>Easiest way to fint the job</h4>
    <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
    <a href="#" class="btn btn-primary">Post Resume</a>
  </div>
</div>

我的CSS代码：

.right-block {
   position: absolute;
   width: 18rem;
   background-color: #00cc99;
   opacity: 0.5;
   color: white;
   padding: 20px 20px
 }

 .left-block {
    position: absolute;
    width: 50rem;
    background-color: #00cc99;
    opacity: 0.5;
    color: white;
    padding: 20px 20px
  }

Answer 1

尝试一下。此背景图片仅供演示。

.right-block {     
   background-color: #00cc99;
   opacity: 0.5;
   color: white;
   padding: 20px 20px
}
.comm-block{
  display:inline-block;
  width:30%;
}
.left-block {  
  background-color: #00cc99;
  opacity: 0.5;
  color: white;
  padding: 20px 20px
}
.img-wrap{
  position:relative;
}
.img-block {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="img-wrap">
  <div class="img">
  <img src="http://www.abstract-living.com/wp-content/uploads/2015/05/meeting-strangers.jpg"  class="img-responsive" alt="Responsive image">
  </div>
  <div class="img-block text-center">
  
  <div class="comm-block">
  <div class="left-block">
    <h4>Easiest way to fint the job</h4>
    <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
    <a href="#" class="btn btn-primary"> Find Job</a>
    </div>
  </div>
  <div class="comm-block">
    <div class="right-block">
    <h4>Easiest way to fint the job</h4>
    <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
    <a href="#" class="btn btn-primary">Post Resume</a>
    </div>
  </div>
</div>
</div>

Answer 2

这是我使用bootstrap v4的解决方案，

基本上，我使用默认的bootstrap flexbox类，先使用align-items-end将绿色框推入末尾，然后使用justify-content-center居中放置

这不是一个适当的解决方案，但是它将为您提供一个起点。

以全页视图打开代码段

.parent {
  position: relative;
  height: 400px;
  background: red;
  width: 100%;
}

img {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.left-block,.right-block{
  background:green;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="parent d-flex align-items-end justify-content-center">
      <img src="HTTPS://PLACEHOLD.IT/1500x500" class="" alt="Responsive image">.
      <div class="text-right col-md-4 left-block">
        <h4>Easiest way to fint the job</h4>
        <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
        <a href="#" class="btn btn-primary"> Find Job</a>
      </div>
      <div class="text-left col-md-4 right-block">
        <h4>Easiest way to fint the job</h4>
        <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
        <a href="#" class="btn btn-primary"> Find Job</a>
      </div>
    </div>
  </div>
</div>

Answer 3

根据您的示例图片进行检查，我认为它可以帮助您

HTML

<div class="container-fluid">div class="row">
<div class="col-md-12 banner-img">
  <div class="row text-block">
    <div class="text-right col-md-3 offset-md-3 ">
      <div class="left-block">
        <h4>Easiest way to fint the job</h4>
        <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
        <a href="#" class="btn btn-primary"> Find Job</a>
      </div>
    </div>
    <div class="text-right col-md-3 col-md-3">
      <div class="right-block">
        <h4>Easiest way to fint the job</h4>
        <p>It is long established fact that a reader will be distracted by readable content of a page when looking at its layout</p>
        <a href="#" class="btn btn-primary">Post Resume</a>
      </div>
    </div>
  </div>
  <img src="http://via.placeholder.com/1000x450" style="position:absolute;width:100%;height:450px;" class="banner-main" alt="Responsive image">
</div>

CSS

.banner-img {
  position:relative;
  height:450px;
  overflow:hidden;
}.banner-main {
  top:0;
  z-index:-1;
}
.text-block {
  position:absolute;
  bottom:0;
}
.right-block {

   background-color: #00cc99;
   opacity: 0.5;
   color: white;
   padding: 20px 20px;
   z-index: 9;
  margin-top:215px;
 }

 .left-block {
    background-color: #00cc99;
    opacity: 0.5;
    color: white;
    padding: 20px 20px;
    z-index: 9;
    margin-top:215px;
  }

示例：demo link

使用引导程序在图像上放置文本框

3 个答案: