如何在响应布局中将背景图像上的元素设置为

- >我的目标是将文本放在图像背景上，并在重新调整浏览器窗口大小时将其移动到背景中在图像的边缘）。我不想保留图片下方的文字。如何在响应布局中将背景图像上的元素设置为

问题： 我下面this教程了解响应设计。在完成教程之后，我设定了将图像上的所有文字移动的目标。基本上我想使用红色图像作为<section>和<aside>标签中的所有内容的背景（它只是文本，但我猜它也适用于表单等）。

我的方法是换这两个标签中的另一个<div id="content">（下依然<div id="wrapper">），然后将其设置为position:absolute;在CSS。这个wouls重叠图像上的文字，但是当我重新调整窗口的大小时，文字会溢出背景。它不受父div（wrapper）的限制。我认为它会保持在包装div，因为我认为它应该是它的父母。

它也漂浮，它与图像或图像中的div完全断开。

问题： 所以我的问题是我应该怎么做，而不是（保持响应）？

代码： 这里是的jsfiddle： this is the original code和 this is what I tried to do（尝试调整窗口的大小..它不好看）

例子： * 附： *为了更好地理解我想实现的目标，请看this page，您可以在其中看到文本在可重新调整大小的背景上保持其位置和比例。（尝试重新调整您的浏览器窗口）

来源

2014-03-27 Danny

在你的的jsfiddle CSS删除position: fixed;

#content{ 
     width: 75%; 
     position: fixed; 
     /*Remove this line from CSS (Line number 40 in jsfiddle CSS of your code)*/ 
     padding: 1%; 
     padding-top: 30%; 
    }

来源

2014-03-27 12:12:21 Rohit

嗨，如果我这样做的所有文字去的形象下，因此它并不真正使用图像作为背景。 – Danny

我不想将文字放在图像下方。它必须使用图像作为文本的背景。我试图用position：fixed;和位置：绝对;但是当我调整窗口大小时，它会弄乱布局（文字遍历图像的边缘等等） – Danny

为什么不直接使用图像作为真正的CSS'background-image'？ – KittMedia

如何在响应布局中将背景图像上的元素设置为

回答

相关问题