Question

几天后我正努力做这项工作。我有一个带有text的图像的设计，我最后可以在图像上设置文本，但我想给图像一个top position但是底部有太多的空间我不知道如何解决它！

这就是我所拥有的：我知道我必须在文本上修改一些padding内容。

这是我的标记，就像我使用bootstrap的方式。

<div class="row-color clearfix">
<div class="container">
<div class="col-lg-12 no-padding wrapper">
<img class="img-responsive" src="http://s12.postimg.org/mu9u7nzvx/header_ml_02.png" alt="">
<div id="bg-text">
<div class="text-overimg">Child Education Planner</div>
</div>
</div>
<div class="texto_cursos">Face courses, distance and on-line</div>
</div>
</div>



.row-color {
    background: #575756 none repeat scroll 0 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.5em;
    position: relative;
    z-index: 9;
    padding-bottom: 20px;
}

.no-padding {
    padding:0px;
}

.wrapper {
  padding-left: 10px;
  padding-right: 10px;
  text-align:center;
  position:relative;
}

.wrapper .img-responsive {
    display:inline;
}

.wrapper #bg-text {
    color: white;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
}

.text-overimg{
    position:relative;
    font-size:3.1em;
    color:#FFF;
    font-weight:500;
    text-shadow: 0.08em 0.08em 0.05em #333;
    padding-top: 20%;
}

.texto_cursos{
    padding-bottom: 10px;
    font-size:2.5em;
    color:#FFF;
    font-weight:400;
    text-align:center;
}

我想有这个，我不得不说我想让它对大多数设备做出响应，这是我使用的bootstrap之一。

这是我真正想要的，但不知道该怎么做。特别是图像后面的白色background，在最后一个文本和图像之间没有太多空间。

再次感谢！

Answer 1

**更新我无意中说如果你想将图像向上移动一点。我的意思是**

如果您想将图片向下移动一点，可以向其添加margin-top：

.wrapper .img-responsive {
    display:inline;
    margin-top:50px;
}

请参阅JSFiddle here

Answer 2

尝试类似的事情：

＆＃13;

.imagebox-container {
  width: 100%;
  padding-top: 30px;
  background: linear-gradient(0, gray 50%, transparent 50%);
}
.imagebox img {
  max-width: 100%;
  display: block;
}
.imagebox-caption {
  width: 100%;
  text-align: center;
  padding: 5px;
  line-height: 1;
}
.imagebox {
  position: relative;
  width: 400px;
  margin: 0 auto;
}
.imagebox-caption-overlay {
  position: absolute;
  bottom: 10px;
  transition: 500ms all linear;
  width: 100%;
  text-align: center;
  background: transparent;
  color: white;
}

.imagebox:hover .imagebox-caption-overlay {
  background: white;
  color: black;
}

＆＃13;

<div class="imagebox-container">
  <div class="imagebox">
    <img src="https://www.drupal.org/files/issues/header_1.png" />
    <div class="imagebox-caption-overlay">ANOTHER BLA BLA BLA</div>
  </div>
  
  <div class="imagebox-caption">
    bla bla bla
  </div>
</div>

＆＃13;

Answer 3

可能你需要这个。请看。

＆＃13;

.imagebox-container {
  width: 100%;
  padding-top: 30px;
  background: linear-gradient(0, gray 50%, transparent 50%);
}
.imagebox img {
  max-width: 100%;
  width: 400px;
  margin: 0 auto;
  display: block;
}
.imagebox-caption {
  width: 100%;
  text-align: center;
  padding: 5px;
  line-height: 1;
}

＆＃13;

<div class="imagebox-container">
  <div class="imagebox">
   <img class="img-responsive" src="http://s12.postimg.org/mu9u7nzvx/header_ml_02.png" alt="">
  </div>
  
  <div class="imagebox-caption">
   Face courses, distance and on-line
  </div>
</div>

＆＃13;

Css + html：图像相对于文本

3 个答案: