Html 模拟css边框图像开始：透明背景上的圆角图像太宽，无法定义为边框
在网上搜索，我的问题似乎可以通过CSS3属性Html 模拟css边框图像开始：透明背景上的圆角图像太宽，无法定义为边框,html,css,Html,Css,在网上搜索，我的问题似乎可以通过CSS3属性border image start解决。由于还没有浏览器实现这一点，我希望有人能帮助我找到其他解决方案。提前谢谢 我的一个朋友设计的，我正在翻译成html/css 关于它的问题是内容领域。内容区域的宽度是固定的，高度取决于内容。它有一个中等的部分，跨越整个宽度，重复1px高的背景图像，一切照旧。但它在透明背景上也有一些奇特的角落，这些角落太高了，以至于无法将它们放在内容区域的外面（上面和下面）。（完整地说，在这些角之间的顶部和底部有一个不同的图像，但
border image start.main<div class="rechteSpalte">...</div>
<div class="mittlereSpalte">...</div>
。。。
...
我用第二个例子准备了一个例子来玩玩并尝试一下你的想法。当然，你应该能够做到这一点，而不必削减你的背景，当然，除了将顶部和页脚分开 以下是一个我认为您可以轻松适应的解决方案： 请注意，紫色背景将是您的顶部纸张背景。黄色部分将具有重复的背景。它将根据需要随文本增长
编辑：请注意，这里的诀窍是让内容层（p标记）的文本具有最高的z索引，但顶部区域的z索引仍高于具有重复背景的文本的包含元素。您肯定能够做到这一点，而无需切割背景，当然，除了顶部和底部分开之外 以下是一个我认为您可以轻松适应的解决方案： 请注意，紫色背景将是您的顶部纸张背景。黄色部分将具有重复的背景。它将根据需要随文本增长
编辑：注意这里的诀窍是让内容层（p标签）的文本具有最高的z索引，但仍然让顶部区域的z索引高于具有重复背景的文本的包含元素。多亏@Jonah的输入，我能够修复我的代码 在这里，您可以现场观看： 如果你不想在#content中的段落上直接出现负边距，就需要额外的div
身体{
背景：暗绿色；
}
#顶{
背景：url(http://test.illusionet.ch/jg/greengrass/img/header.png)无重复中心顶部；
高度：500px；
保证金：0自动；
位置：相对位置；
宽度：982px；
z指数：10；
}
#页脚{
背景：url(http://test.illusionet.ch/jg/greengrass/img/bigfoot.png)无重复中心底部；
高度：322px；
保证金：0自动；
位置：相对位置；
宽度：982px；
z指数：10；
}
#主要{
保证金：0自动；
宽度：982px；
背景：黄色url(http://test.illusionet.ch/jg/greengrass/img/page.png)重复-y右上；
位置：相对位置；
z指数：20；
最小高度：100px；
}
#内容{
利润上限：-250px；
}
.清楚{
明确：两者皆有；
}
.neg_margin_hook{
高度：1px；
}
.neg_余量_底部{
边缘底部：-200px；
}
#内容p{
浮动：对；
宽度：30%；
右：3%；
}
.左{
边缘顶部：100px；
}
这是一种发酵剂
敏捷的棕色狐狸跳过懒惰的狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。敏捷的棕色狐狸跳过了懒狗。快车
<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>