背景大小：水平滚动页面中的封面和文本答案

【问题标题】：Background-size:cover and text in an horizontal scrolling page背景大小：水平滚动页面中的封面和文本
【发布时间】：2015-01-16 04:17:40
【问题描述】：

我正在尝试制作一个非常简单的 HTML 页面，该页面带有水平滚动条，左侧仅包含一张大图片（带有background-size:cover），封面右侧包含长文本。

我认为我的问题是关于position:relative（带有浮动）和position:absolute（带有左侧），但我无法解决它。目前，封面图片OK，显示在左上角。但是文本显示在右下角（而不是封面的右上角）。

你能帮帮我吗？

这是展示我所做的演示：http://jsfiddle.net/kz5ch49w/38/

【问题讨论】：

【解决方案1】：

如果我对您的理解正确，那么您需要将文本放入您的封面 ID，而不是单独的 div。但是，您可以将您的封面 id 位置更改为仅绝对位置，并将相对位置更改为您的文本 div。

#cover { position:absolute; /* other stuff */ }

和

#text {  position:relative; /* other stuff */ }


http://jsfiddle.net/kz5ch49w/46/

【讨论】：

非常感谢，它有效！这两个 div 是分开的，因为我不希望将文本放在图片上，而是放在图片的右侧。无论如何，再次感谢你。 :) 结果如下：jsfiddle.net/kz5ch49w/40
它适用于 Chrome 和 Safari，但不适用于 Firefox 和 IE，如您在此处看到的那样：jsfiddle.net/kz5ch49w/40 您能帮我解决这个问题吗？ /跨度>
感谢您的回答。但我不希望文字出现在图片上方...我之前使用 Chrome 和 Safari 获得的效果在视觉上是完美的。
再次感谢您的回答！ :-) 但抱歉，我不想在图片上滚动列。我希望图片留在列的左侧，并且两个元素一起滚动。这个演示 jsfiddle.net/kz5ch49w/40 在视觉上完全符合我在 Chrome 和 Safari 上的要求，但它不适用于 FF 和 IE。