在图像上的响应文本覆盖

时间:2014-04-03 18:41:35

标签: css image text overlay

我希望有人可以帮助我。我一直在尝试使用Skeleton样板框架学习响应式网站设计。

我使用了一个旧的PSD模板作为参考,除了在PSD文件中有图像横幅的地方之外,所有这些都很好用,并且在这个图像横幅上是一些文本。如果我将图像作为横幅div的背景,并在横幅div中添加正常工作的文本,直到网站达到断点并且背景图像仅显示其中的一部分等等。

我花了几天时间尝试使用Google搜索的不同内容,而且似乎无法弄明白或者让它发挥作用。

有没有人有任何建议请我真的很感激。

我的测试(学习)网站位于TEST SITE

这是一个显示我想要实现的效果的img的链接(抱歉没有足够的代表发布图片)

[2]: http://i.stack.imgur.com/VzmcV.jpg

2 个答案:

答案 0 :(得分:1)

你应该能够将图像作为background-image属性,我还会使用background-size: coverbackground-position: center以及background-repeat: no-repeat来确保背景图像总是覆盖整个div。

答案 1 :(得分:1)

您可以使用position:absolute。这是一个小提琴如何。 http://jsfiddle.net/PB9JD/