html - 模仿 css border-image-outset : rounded corner images on transparent background too wide to define as border

Question

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

This is the layout我的一个 friend 设计的，我正在将其翻译成 html/css。

关于它的问题是内容区域。内容区域的宽度是固定的，高度取决于内容。它有一个中等部分，用重复的 1px 高背景图像跨越整个宽度，一切如常。但它在透明背景上也有一些花哨的 Angular ，这些 Angular 太高而无法在内容区域之外(上方和下方)。 (而且，为了完整起见，这些 Angular 之间的顶部和底部图像不同，但是对于多个背景图像，这不再是问题。)

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

我准备了一些例子来证明我的问题。大多数样式和图像当然仍然缺失。 1px paddings/borders 是为了更好的可见性。

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

然后我把图片剪成大约 100 block 。现在只有一小部分丢失了，在子导航下方的左侧 - 但我和以前一样卡住了。打开: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 仍然高于文本的包含元素有重复的背景。