Question

查看此网站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），同时保持最佳实践！

Answer 1

我猜这是背景：url样式是它的关键。你可以在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>

在背景图像上放置文本的技巧

1 个答案: