如何設置圖片背景，使用<img>標籤而不是CSS？

Question

我創建了4列。每列都包含一幅圖像，我想在每幅圖像上放置文字。

爲了實現這一點，我顯然需要將圖像設置爲背景。我知道這可以通過CSS（這是我目前正在做的）來實現，但我希望將圖像作爲背景放在我的HTML文件中。原因;這樣我就可以輸入相關的'alt'文字進行搜索引擎優化。

我該如何做到最好？

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

#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; 
 
}

<div id="img-as-background"> 
 
    <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" alt="" /> 
 
<div class="container"> 
 
    Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text Overflow text 
 
</div> 
 
</div>