如何修复带有 "background-size: cover" 的文本？

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;

然后给你一个文字class/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*/

请记住，字体不会调整大小。您尝试做的事情很难完成，但这应该可以帮助您入门。

更新：

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

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

而不是该函数中的 $(window)，你可以给你的 div 和背景一个 ID，然后把它放在那里。

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

如何修复带有 "background-size: cover" 的文本？

How to fix a text with a "background-size: cover"?

html

css

responsive-design