html - 重复 Y 布局问题-6ren

html - 重复 Y 布局问题

转载作者：行者123 更新时间：2023-11-28 19:08:42

更新:在底部

我正在尝试使正文背景图像也是主要内容 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/

文章推荐： javascript - 水平滚动

文章推荐： ios - NSDictionary 键比较失败

文章推荐： ios - ios中Json解析中Post和Get方法的区别

文章推荐： jquery lavalamp 焦点

php - 步进搜索算法。从 N 中选择一个，重复，重复，查看最终结果
我想知道如何考虑需要您做出某些选择才能看到最终结果的搜索系统。我说的是 select 表单，您可以在其中根据您的选择继续操作，然后您会看到结果。下面描述了我正在谈论的一个随机示例。想象一下 Init
MYSQL - 重复
您好，我目前正在编写一些软件来管理我们的库存。我搜索了 2 个表 master_stock(保存每一个股票代码和描述)库存(保存库存代码、地点、数量...) 一切都很好，但这是我遇到的问题。假设我的
mysql向表中插入数据，重复
我有 2 个表，我想合并其数据。id 是我的关键字段(增量且不同)。表1和表2字段说明例如:id - 名称 - 值我想将表2的所有数据插入表1，它们有不同的数据，但在某些行中有相同的id。所以当我
assembly - 重复/广播一个字节到整数寄存器的每个位置
我正在努力解决汇编中的一个问题，我必须获取十六进制代码的第一个字节 (FF) 并将其复制到整个值中: 0x045893FF input 0xFFFFFFFF output 我所做的
eclipse - 重复 eclipse
我有 Eclipse Indigo 版本，我可以在其中运行 Java 和 C++ 项目。但我只想使用另一个 Eclipse 来编写 C++ 项目。所以我将 eclipse(不是工作区)的源文件夹复制
java - 按钮代码使应用崩溃(重复)
This question already has answers here: What is a NullPointerException, and how do I fix it? (12个答案)
r - 每个值的累积计数(重复)
This question already has answers here: Numbering rows within groups in a data frame (8个答案) 5个月前关闭。
vim - 更强大的点版本(重复)
我知道用q记录到寄存器中，但我想知道是否可以设置一些东西来快速调用最后一个记录，就像一样。回顾最后一个简短的编辑命令(有关的讨论请参阅 here。)。我知道@@，但它似乎只有在执行@z之后才起作
Xcode 重复/删除行
来自 Eclipse 并且一直习惯于复制行，发现 Xcode 没有这样的功能是很奇怪的。或者是吗？我知道可以更改系统范围的键绑定(bind)，但这不是我想要的。最佳答案要删除一行:Ctrl-A
Haskell，重复+排列的组合
假设我有一个包含元素的列表，例如[1,2,3,4,5,6,7,8]。我想创建长度为 N 的该元素的所有排列。因此，对于N = 4，它将是[[1,1,1,1],[1,1,1,2],[1,1,2,1],
java - JMenu 重复
我有一个带有 JMenu 的 JFrame。当我在某些情况下添加包含图像的 JPanel 时，程序首次启动时菜单会重复。调整大小时重复的菜单消失。任何建议都非常感激。谢谢。代码如下: public c
JAVA HashMap 重复
我正在尝试查找目录中文件的重复项。我对这个 block 有一个问题，它以文件地址作为参数: public void findFiles(ArrayList list){ HashMap hm
c# - 回发时列表框重复(重复)
我知道这个问题已经发布并且已经给出了答案，但我的情况不同，因为我在单个方法上填充多个下拉列表，所以如果我点击此链接 After every postback dropdownlist items re
c# - 从时间段中选择一天 - 重复
我正在尝试为我的日历应用程序实现重复模式。我希望它的工作方式与 Outlook 在您设置重复约会时的工作方式相同。 public async Task> ApplyReccurrencePeriod
c# - 重复 cookies ？
我有一个利用 cookie 来支持准向导的应用程序(即，它是一组相互导航的页面，它们必须以特定顺序出现以进行注册)。加载 Logon.aspx 页面时 - 默认页面 - 浏览器 cookie 看起来
Javascript 重复 if 语句更好的解决方案？
我有 3 个输入，代码检查它们是否为空，如果为空，则将变量值添加到输入中。所以我有 3 个具有值的变量: var input1text = "something here"; var input2t
javascript - 仅更改数组元素三次，重复
根据数组的长度更改数组的每个元素的最佳方法是什么？例如: User #1 input = "XYZVC" Expected Output = "BLABL" User #2 input = "XYZ
javascript - Algolia 重复
我在让 Algolia 正常工作时遇到了一些麻烦。我正在使用 NodeJS 并尝试在我的数据库和 Algolia 之间进行一些同步，但由于某种原因似乎随机弹出大量重复项。如您所见，在某些情况下，会弹
java - ANTLR4 重复 AND
遵循以下规则: expr: '(' expr ')' #exprExpr | expr ( AND expr )+ #exprAnd | expr ( OR expr )+ #exprO
Android动画应该从左进入，等待一段时间再从右离开，重复
我有一个布局，我想从左边进入并停留几秒钟，然后我希望它从右边离开。为此，我编写了以下代码: 这里我在布局中设置数据: private void loadDoctor(int doctorsInTheL

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 重复 Y 布局问题