如何在圖像上添加HTML文本或使背景圖像響應

我正在創建一個響應式標題圖像，這將縮小到移動和採取全屏的寬度。

我想用img標籤完成此操作，然後應用100％的最大寬度，但我希望在該圖像的頂部包含一些文本，因此選擇使用背景圖像。我不想絕對的圖片上的文字，因爲這會導致移動問題。

此外，關於背景圖像，我不能使用background-size，因爲ie8不支持此功能。

是否有任何其他方式可以實現在圖像上放置文本，圖像佔用容器的全部寬度以及圖像的整個高度？

2013-01-09 Adam

<div id="container" style="height: 100px; width:100px; display:block;"> 
    <img src="some-img.jpg" style="display:block;"/> 
    <span style="position:absolute;">Text over image</span> 
</div>

基本上，你只需要將文本放置在父圖像上。

z-index如果您有多個競爭元素，屬性對於可視化「堆疊」元素非常有用。

來源

2013-01-09 16:33:28

謝謝，但我上面說過，我想避免使用絕對定位，購買也許沒有其他方式來做到這一點 – Adam

好，所以其他答案是：當然 - 但你需要操縱圖像在服務器端。實際上，你也可以用css來做到這一點，它是「相對的」，但它不會有多大意義，因爲「相對」文本集的佈局含義與包含的「絕對」定位集大不相同。我可以問 - 爲什麼你無法動態地抵消不相對定位的文本？ –

如何在圖像上添加HTML文本或使背景圖像響應

回答

相關問題