Question

在网上搜索，我的问题的解决方案似乎是CSS3属性border-image-outset。由于没有浏览器实现这一点，我希望有人可以帮助我解决其他问题。提前谢谢。

This is the layout我的朋友设计的，我正在翻译成html / css。

关于它的问题是内容区域。内容区域的宽度是固定的，高度取决于内容。它有一个中等的部分，横跨整个宽度，重复1px高背景图像，照常营业。但它在透明背景上也有一些花哨的角落，这些角落太高而无法将它们放在内容区域的外部（上方和下方）。（而且，只是为了完整，这些角落之间的顶部和底部有不同的图像，但这对于多个背景图像来说不再是问题。）

那么我如何用重复的背景填充内容区.main，而不显示在角落后面？

我准备了一些例子来证明我的问题。大多数风格和图像当然仍然缺失。 1px填充/边框用于提高可视性。

首先，我尝试了一个简单的方法，只有一个标题和一个页脚图像。但我无法让内容与页眉和页脚图像重叠，页面仍然具有所需的高度...打开：http://test.illusionet.ch/jg/simple.html

然后我把照片剪成了大约100张。现在只有一个小块丢失，在导航下方的左侧 - 但我和以前一样卡住了。打开：http://test.illusionet.ch/jg/pieces.html

我尝试过不同的技巧。我知道标记现在已经乱了。请忽略。或者随意从头开始重写。到目前为止唯一给出的是这两个div的顺序和邻域：

<div class="rechteSpalte">...</div>
<div class="mittlereSpalte">...</div>

我准备了一个fiddle与第二个例子一起玩，并试试你的想法。

Answer 1

当然，除了将顶部和页脚分开之外，你绝对可以在不削减背景的情况下做到这一点。

这是一个我认为你可以轻松适应的解决方案：

http://pastehtml.com/view/b4lfcizr6.html

请注意，紫色背景将是您的顶级纸张背景。黄色部分会有你重复的背景。它会随着文本的增长而增长。

编辑：请注意，这里的技巧是让内容层（p标签）的文本具有最高的z-index，但仍然要使顶部区域的z-index高于文本的包含元素的z-index。有重复的背景。

Answer 2

感谢@Jonah的输入，我能够修复我的代码。

您可以在这里看到它：http://test.illusionet.ch/jg/zindex.html

如果您不希望在#content中的段落上直接使用负边距，则需要额外的div。

<html>
<head>
<style>
    body {
        background: darkgreen;
    }
    #top {
        background: url(http://test.illusionet.ch/jg/greengrass/img/header.png) no-repeat center top;
        height: 500px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #footer {
        background: url(http://test.illusionet.ch/jg/greengrass/img/bigfoot.png) no-repeat center bottom;
        height: 322px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #main {
        margin: 0 auto;
        width: 982px;
        background: yellow url(http://test.illusionet.ch/jg/greengrass/img/page.png) repeat-y right top;
        position: relative;
        z-index: 20;
        min-height: 100px;
    }
    #content {
        margin-top: -250px;
    }
    .clear {
        clear: both;
    }
    .neg_margin_hook {
        height: 1px;
    }
    .neg_margin_bottom {
        margin-bottom: -200px;
    }
    #content p {
        float: right;
        width: 30%;
        padding-right: 3%;
    }
    .left {
        margin-top:100px;
    }
</style>
</head>
<body>
    <div id="top">
    </div>
    <div id="main">
        <div class="neg_margin_hook">
        </div>
        <div id="content">
            <p class="right">Cras mattis consectetur purus sit amet fermentum. </p>
            <p class="center">the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.</p>
            <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <div class="clear neg_margin_bottom">
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>
<html>

Mimic css border-image-outset：透明背景上的圆角图像太宽而无法定义为边框

2 个答案: