0

我的问题特定于背景图像。我已将背景图像应用于身体并将其水平居中。对于每一页，我将在标题下方添加一个段落，每个段落的大小都会不同，从而导致滚动。背景图像必须在段落后面流动，但我不能让正文标签扩展以包含段落，这意味着当您向下滚动时背景图像会被切断。我不想设置特定的高度，因为这会使页面滚动到段落之外。我已经尝试了几乎所有我能想到的相对/绝对位置和高度/最小高度的组合。

<html>
    <body>
        <div class="paragraph">
            <p>text!</p>
        </div
</html>

CSS

html {
    background:             url('/images/bg.png');
    margin:                 0;
    padding:                0;
    height:                 100%;
    min-height:             100%;
}

body {
    margin:                 0;
    padding:                0 0 50px 0;
    background-image:       url('../images/fullheader.gif');
    background-position:    center 20px;
    background-repeat:      no-repeat;
    position:               absolute;
    top:                    0px;
    bottom:                 0px;
    right:                  0px;
    left:                   0px;
    min-height:             100%;
}

.paragraph {
    width:                  640px;
    padding:                10px 20px;
    margin:                 400px auto 0 auto;
    min-height:             100%;
}

如果有帮助，我可以发布屏幕截图。

4

3 回答 3

0

如果您的目标是保持背景的高度足以覆盖段落的大小，并且限制不重复 且不扭曲方面收音机，那么有一个简单而干净的解决方案 在正文标签中定位背景。将其大小设置为 auto 水平大小和高度 100% 该段落包含在正文中将推动正文高度，这将推动背景高度而不会扭曲纵横比

body {
    width:100%; <!-- or what ever.....-->
    background:url("whatever.jpg") no-repeat;
    background-size:auto 100%;
}

这是给你的小提琴。我使用了维基百科图像。玩它修改段落的数量等......希望它有帮助

于 2013-04-24T12:32:35.143 回答
0

像这样将css添加到正文中

       body {
             background:#fff url(background.jpg) repeat-y top center;
             margin:0px;
             padding:0px;
            }
于 2013-04-24T12:01:52.433 回答
0

如果垂直重复不是一个选项，并且您的 bg 图像当然不能无穷无尽，我认为在一些滚动后不切断图像的唯一方法是修复它的位置：

body {
    background-attachment: fixed;
}

不，可能还有另一种解决方案，但在大多数情况下，这看起来不太好：设置background-size，例如：

body {
    background-size: contain;
}
于 2013-04-24T12:14:50.767 回答