如何让html内容在初始视图之外重复/加载？
我正在制作一个基于web的小工具，但遇到了一个问题，当页面宽度大于初始可视区域时，背景和hr标记都会断裂。换句话说，一旦我横向滚动！ 编辑：这需要对chrome起作用。如果在chrome中不可能，也可能是firefox 另外，多亏了凯尔特人的回应，我才有可能解决人力资源问题，背景仍然没有像它应该做的那样重复！ 然而，在我真正的应用程序中，我不知道页面的宽度，因为它的内容和布局是动态的。如果需要，我可以使用javascript解决这个问题 用于复制问题的Html代码： 显然我还不能在这里张贴照片。因此，请链接到2张图片： 初步看法： 滚动视图： 身体{ 背景：重复线性渐变 90度， RGBA961091880.31， RGBA961091880.30100px， rgba70,82152,0.31100px， rgba70,82152,0.31200px } 这里有文字如何让html内容在初始视图之外重复/加载？,html,css,google-chrome,firefox,Html,Css,Google Chrome,Firefox,我正在制作一个基于web的小工具，但遇到了一个问题，当页面宽度大于初始可视区域时，背景和hr标记都会断裂。换句话说，一旦我横向滚动！ 编辑：这需要对chrome起作用。如果在chrome中不可能，也可能是firefox 另外，多亏了凯尔特人的回应，我才有可能解决人力资源问题，背景仍然没有像它应该做的那样重复！ 然而，在我真正的应用程序中，我不知道页面的宽度，因为它的内容和布局是动态的。如果需要，我可以使用javascript解决这个问题 用于复制问题的Html代码： 显然我还不能在这里张贴照片。
因为您将div的宽度设置为100%，这意味着它将只与页面加载的初始屏幕大小一样大。由于这个原因，100%宽度div内的hr标签被切断。为了防止这种情况发生，请将100%宽度div设置为与其下方的相同大小 此代码在chrome中运行良好：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 350px,
rgba(70, 82, 152, 0.31) 350px,
rgba(70, 82, 152, 0.31) 700px
)
}
</style>
</head>
<body>
<div style="width: 4000px; margin-top: 60px">
<hr>
</div>
<div style="position: absolute; width: 4000px">
Text goes here
</div>
</body>
</html>
<style>
body {
background: repeating-linear-gradient(
90deg,
rgba(96, 109, 188, 0.31),
rgba(96, 109, 188, 0.30) 10%,
rgba(70, 82, 152, 0.31) 10%,
rgba(70, 82, 152, 0.31) 20%
)
}
</style>
我无法复制你的问题，只是在IE中检查，一切看起来都很好？对不起，我应该补充我需要这个在Chrome中工作，或者可能是Firefox。谢谢你的回答，它确实解决了2个问题中的1个，但是它只作为硬值工作，不适用于动态内容。在查看html结果时，编辑了初始帖子以解决更明显的问题。是的，您需要使用百分比进行响应性设计。你需要解决的第二个问题是什么？你的问题不是很清楚。第二个问题是背景渐变没有正确地重复，它会重置初始页面结束的位置。很容易在图片中看到我把链接放到了Orry我刚刚看到了你的更新。你使用的是什么版本的chrome？背景重复对我来说很好，上面的代码..版本40.0.2214.94 m 64位，从我可以看出它是最新的，但是如果重新加载页面时浏览器窗口的确切宽度是重复距离的倍数，则背景重复问题可能是sublite/不在那里。对于我来说，在stackoverflow上运行代码片段只会使背景条带变宽