给html文本添加图形处理

<h2><span></span>Designing Istant Gratification</h2>

h2 {
 font: 3em/1em Times, Serif;
 font-weight: bold;
 margin:0;
 position: relative;
 overflow: hidden;
 float: left;
}

h2 span {
 position: absolute;
 width: 100%;
 height: 5em;
 backgroumd: url(striped.gif);
}

p {
 clear:left;
}

上例中,我们标题元素的文本的float属性设置为left.这种技巧就是让span元素中的背景图片通过绝对定位放在HTML文本之上.

通常情况下,使用float属性后,标题会移到左边,内容环绕在右边.但是段落元素的类型选择符里,我们使用了clear属性,清除了浮动效果.

将高度的值设为5em 并将overflow设为hidden可避免图片从标题元素中溢出覆盖页面其它部分的情况