css - 图像上的响应式文本叠加

标签 css image text overlay

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

我使用了一个旧的 PSD 模板作为引用,除了 PSD 文件中有一个图像横幅和这个图像横幅上有一些文本之外,所有模板都运行良好。如果我将图像作为横幅 div 的背景,并在横幅 div 中添加文本,该文本工作正常,直到网站遇到断点并且背景图像因仅显示它的一部分而变得困惑等等。

我花了好几天时间尝试用 Google 搜索过的不同东西,但似乎无法弄清楚或让它发挥作用。

有没有人有任何建议,我将不胜感激。

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

这是一个 img 的链接,显示了我正在尝试实现的效果(抱歉没有足够的代表来张贴图片)

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

最佳答案

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

关于css - 图像上的响应式文本叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22846221/

相关文章:

css - 在 IntelliJ IDEA 中将 .css 作为 .less 文件打开

jquery - 为飞机制作带有机翼的座位图

php - 使用 CodeIgniter 从 MySQL 数据库检索图像,而不使用上传库。是否可以?

android - 为什么仍然无法显示重置图像

python - 是否有用于将 RTF 转换为纯文本的 Python 模块?

javascript - 表头上的切换按钮仅在 2 次切换后才有效

html - 如何使用 Bootstrap 使图像响应

html - 删除 anchor 标记内图像的边框

JavaScript Fetch API - 将文本保存为对象?

c - Xlib:绘制一个文本输入框并在输入时读取文本