Question

我正在制作一个基于Web的小工具，但遇到问题，当页面宽度大于初始可视区域时，后台和hr标签都会中断。换句话说，一旦我侧身滚动！ 编辑：这需要适用于Chrome。（或者如果Chrome中不可能的话可能是firefox）此外，由于凯尔特人的反应，我可以解决人力资源问题，背景仍然没有重复，因为它应该！然而，在我的真实应用程序中，我不知道页面的宽度，因为它的内容和布局是动态的。（如果需要，我可以使用javascript解决）

用于复制问题的Html代码：显然我还不能在这里发布图片。所以链接到2张图片：初步观点：http://imgur.com/HdHedgk 滚动视图：http://imgur.com/hh2wgE4

＆＃13;

body {
            background: repeating-linear-gradient(
                    90deg,
                    rgba(96, 109, 188, 0.31),
                    rgba(96, 109, 188, 0.30) 100px,
                    rgba(70, 82, 152, 0.31) 100px,
                    rgba(70, 82, 152, 0.31) 200px
            )
        }

＆＃13;

<div style="width: 100%; margin-top: 60px">
        <hr>
    </div>
    <div style="position: absolute; width: 4000px">
        Text goes here
    </div>

＆＃13;

Answer 1

因为您将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>

如何在初始视图外部重复/加载html内容？

1 个答案: