html - 如何在不使用图像且不添加任何标记的情况下在 css 中将边框作为背景？

Question

例如这里http://jsfiddle.net/jitendravyas/5Wqn4/1/

我要<h1>在红色区域。如何在不使用图像和另一个添加的更多元素的情况下实现。

使用 border没有必要，我只想要这样的背景。

Answer 1

在不使用任何额外标记的情况下，您可以做几件事。

在 h1 上应用负的上边距:

h1{margin-top:-150px;}

http://jsfiddle.net/5Wqn4/2/

绝对定位 h1:

h1{
 position:absolute;
 top:50px;
 left: 50px;   
}

http://jsfiddle.net/5Wqn4/3/

没有你的 body 边界:

如果不使用添加到主体的边框，您可以根据需要简单地设置 h1 的样式:

body {background:yellow;margin:0;padding:0;}

h1{
    background-color:red;
    margin:0;
    height:150px;

}

http://jsfiddle.net/5Wqn4/5/

更新

除了您在下面的评论之外，这里还有一个示例，可能更符合您的需要:

http://jsfiddle.net/SbGDQ/