Question

我创建了4列。每列包含一个图像，我想在每个图像上放置文本。

为实现这一目标，我显然需要将图像设置为背景。我知道这可以通过CSS实现（这是我目前正在做的），但我想将图像作为背景放在我的HTML文件中。原因;这样我就可以输入相关的'alt'文本用于SEO目的。

我怎样才能最好地实现这一目标？

Answer 1

只需将img放入col容器中，将该元素设置为position: relative;，然后使用absolute定位将文本放在图像上。

* {margin:0;}
.col {
  float: left;
  width: 25%;
  position: relative;
}
img {
  display: block;
  width: 100%;
}
.overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: black;
  color: white;
  padding: 1em;
}

<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>
<div class="col">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="overlay">
    <h2>text</h2>
  </div>
</div>

Answer 2

<script type="text/javascript">

$(document).ready(function(){
    $("input-address").typeahead({
        source: ['Washington', 'Sydney', 'Amsterdam', 'Beijing', 'Cairo']
        , minLength: 
    });
});

#img-as-background {
  position: relative;
  overflow: hidden;
}
#img-as-background .container {
  height: 500px;
  padding: 20px;
}

#img-as-background img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: -1;
}

如何使用<img/>标签而不是CSS设置图像背景？

2 个答案: