Question

所以，我将这段代码用于我的div背景：

.bg{
background: url(http://cl.ly/image/1n0I2G3K231f/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   height: 100%;
}

事情是，我想在页面中放置一个文本，该文本停留在背景图像的某个区域。问题是背景图像会调整用户的屏幕大小（按照预期的那样），这会使文本根据用户的屏幕大小保留在图像中的不同位置。

http://ftestes.ueuo.com/help/test.html

我怎样才能做到这一点？

Answer 1

我会尝试给出实际的容器（带有背景图像的容器）：

position: relative;

然后给你一个类/ id的文本，然后给它：

position: absolute;
top: 5%; /*these values depend on where you want the text*/
left: 5%;/*you can also use bottom or right if needed*/

请注意，字体不会重新调整大小。你要做的事情很难完成，但这应该会帮助你开始。

更新：

这是我编写的一个函数，它将根据窗口的大小更改字体大小。它不会动态变化，但会在页面加载时发生变化。

http://jsfiddle.net/plushyObject/n3kkg470/1/

而不是该函数中的$（窗口），你可以给你的div作为背景ID并将其放在那里。

$('#idYouGave').width();

如何使用“background-size：cover”修复文本？

1 个答案: