个人中心
gpt4 book ai didi

html - 重复 Y 布局问题

转载 作者：行者123 更新时间：2023-11-28 19:08:42 28 4
gpt4 key购买 nike

更新:在底部

我正在尝试使正文背景图像也是主要内容 div 的第一个 123px 的背景工作的布局。然后我想在主要内容 div 上放置一个背景(从 123px 开始)，然后向下填充。

然而，repeat-y 显然会向上和向下填充，因此会在 body 背景的顶部重复。

                    ----------------------
                    |                    |               
                    |   HEADER DIV + NAV |
       BODY WITH    |                    |     BODY WITH
    BACKGROUND IMAGE|--------------------|  BACKGROUND IMAGE     
                    |                 ^  |      
                    |    CONTENT DIV  |  |
                    |               123px|
                    |                 |  |
                    |                 v  |
                    |--NEW CONTENT IMAGE-|                    
      BODY WITH     |                    |     BODY WITH
   BACKGROUND IMAGE |                    |  BACKGROUND IMAGE 
                    |                    |
                    |                    |
    |<--------------------100 % Width------------------->|

像这样的东西非常适合不重复:

#content {
 background: transparent url(images/content.gif) no-repeat  center 123px;
 width: 970px;
 margin: 0 auto;
 padding: 0 0 0;
 position:relative; 
}

但是一旦我添加 repeat-y，它就会向上和向下填充内容 div，并覆盖我想要从 body bg 图像中获得的背景的第一个 123px。

我正在考虑在#content div 中添加一个 div，我将重复图像设置在该 div 上，但是我的所有内容都必须从 123 像素开始，我希望它从内容 div 的顶部开始。

有什么办法可以克服这个问题吗？

更新:感谢您的回复。我刚刚发现这个网站，我对 html/css 还很陌生，但我喜欢这个网站的想法。希望我可以为其他人提供一些 XSLT 帮助:)

好的，Erik 的帖子让我非常接近我需要的东西。我认为我没有通过尝试在内容 div 顶部使用正文背景图像来做最好的事情。我将从背景图像中切出相关部分并将其用作内容 div 顶部的单独图像，并使用 z-index 将其放在我的主要内容 repeat-y 之上(如我的示例所示在虚线边框下方)。

我唯一剩下的问题是让内容包装器根据其中的内容垂直缩放。我已经尝试了很多东西，但我无法让它工作!

这基本上是我现在所拥有的(抱歉我不能主持这个例子，但它应该显示高度问题)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <style>
        * {margin: 0; padding: 0; }
        body {
            font-family:Arial,Helvetica,sans-serif; 
            width:100%;
            background:red url(images/bg.jpg) no-repeat scroll center top;
            display:table;
        }
        #top_bar{
            height:17px;
            background: green url(images/top_bar.jpg) no-repeat scroll center top;  
            padding:0;
            margin:0 auto;
        }
        #header{
            height:221px;
            width: 970px;
            background:pink;
            position:relative;
            margin: 0px auto;   
        }
        #wrapper{
            position: relative;
            margin: 0 auto;
            height: 300px;
            width: 970px;
        }
        #content {
            color:white;
            height:100%;
            width: 970px;
            margin: 0 auto;
            padding: 0 0 0;
            position:absolute;
            top:0;
            left:0px;
            z-index: 3;
        }
        #top-background{
            height:123px;
            width: 970px;
            position:absolute;
            background:red;
            top:0;
            left:0px;
            z-index: 2;
            border:dashed 3px #000;
        }
        #bottom-background{
            height:100%;
            width: 970px;
            background: blue url(images/content.gif) repeat-y  center top;
            position:absolute;
            top:0px;
            left:0px;
            z-index: 1;
        }
        #wrapper-foot{
            height:50px;
            width:970px;
            position:relative;
            margin: 0 auto 50px;
            background:orange;
            z-index: 1;
        }
    </style>
    <title>Hi there</title>
</head>
<body>

    <div id="top_bar" ></div>
    <div id="header">
        <!-- some nav etc -->
    </div>     

    <div id="wrapper">
        <div id="top-background"></div>
        <div id="bottom-background"></div>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 

        </div>
   </div>
   <div id="wrapper-foot"></div>
</body>
</html>

最佳答案

您可以通过一些 z-index 的乐趣来获得您想要的东西。它不是非常语义化，但它有效。这是一个例子:

http://www.pixeloution.com/bg_test.html

您可以查看代码的源代码。

基本上，我将列放在包装器中，并将包装器放在我想要列的位置。然后我给列一个绝对位置和 3 的 zindex。接下来，我创建一个 div 来保存上半部分背景，并给它一个 2 的 zindex。最后，背景将一直重复到页面，并将其 zindex 设为 1。整个页面都在这里:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <style>
        #wrapper {
            position: relative;
            margin: 0 auto;
            width: 300px;
            height: 600px;
        }
        #column {
            position: absolute;
            margin: 0 auto;
            height: 600px;
            z-index: 3;
        }
        #top_background {
            width: 300px;
            height: 150px;
            position: absolute;
            top: 0px;
            left: 0px;
            background: pink;
            z-index: 2;
        }
        #bottom_background {
            width: 300px;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            background: orange;
            z-index: 1;
        }


    </style>
    <title>Hi there</title>
</head>
<body>
    <div id="wrapper">
    <div id="top_background"></div>
    <div id="bottom_background"></div>
    <div id="column">
    <p>This is my content. There are just lines and lines of it. They
    go on and on but really don't say very much. Or anything at all.
    They really just talk about themselves. Very meta.</p> 
    <p>This is my content. There are just lines and lines of it. They
    go on and on but really don't say very much. Or anything at all.
    They really just talk about themselves. Very meta.</p>
    <p>This is my content. There are just lines and lines of it. They
    go on and on but really don't say very much. Or anything at all.
    They really just talk about themselves. Very meta.</p>
    <p>This is my content. There are just lines and lines of it. They
    go on and on but really don't say very much. Or anything at all.
    They really just talk about themselves. Very meta.</p>
    <p>This is my content. There are just lines and lines of it. They
    go on and on but really don't say very much. Or anything at all.
    They really just talk about themselves. Very meta.</p>    
    </div>
    </div>
</body>
</html>

关于html - 重复 Y 布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1994682/

28 4 0
文章推荐： javascript - 水平滚动
文章推荐： ios - NSDictionary 键比较失败
文章推荐： ios - ios中Json解析中Post和Get方法的区别
文章推荐： jquery lavalamp 焦点
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com