在背景图像上放置文本的技术答案

【问题标题】：Techniques for placing text over a background image在背景图像上放置文本的技术
【发布时间】：2014-05-28 05:41:45
【问题描述】：

查看此网站http://startbootstrap.com/templates/grayscale/，其中介绍性文字放置在背景图像上。在这种情况下 - 他们使用表格来显示文本

.intro { display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: #fff; background: url(../img/bg.jpg) no-repeat bottom center scroll; background-color: #000; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

当然，实现此目的的另一种方法是使用绝对定位，但采用移动优先的方法 - 我很想知道在保持最佳实践的同时，什么是最轻量级的解决方案（最少的 css）！

【问题讨论】：

你应该创建一个小提琴，这样我们就可以摆弄你的例子:)

标签： css background-image overlay positioning

【解决方案1】：

我猜这是背景：网址样式是它的症结所在。不过，您可以在 DIV 上使用它。其余的样式只是关于 div 本身（文本颜色/div 大小）。

这是一个极简主义的例子 - 这在我的 Android 手机上运行良好：

<html>
<head>
<style type="text/css">
div {
    background: url(http://www.thewebbery.co.uk/Web04/SKP/Files/PITP1.jpg);
    color:#FFFFFF;
    width:900;
    height:600;
 }
</style>

</head>
<body>
<div>
Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image Here's some text over an image 
Some more over an image

</div>
</body>
</head>

【讨论】：