功能:保持标题风格以适应不同宽度;
效果:
源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑动门技术</title>
<style type="text/css">
h3{
background-image: url(bg-slide.gif);
background-repeat: no-repeat;
padding-left: 40px;
color: white;
font-size: 13px;
text-align: center;
line-height: 21px;
}
span{
display: block; /*作为块级元素*/
padding-right: 40px;
background-image: url(bg-slide.gif);
background-repeat: no-repeat;
background-position: right;
}
.wide{
width:339px;
}
.narrow{
width:300px;
}
.narrow1{
width:200px;
}
.narrow2{
width:130px;
}
</style>
</head>
<body>
<h3 class="wide"><span>h3标题文字</span></h3>
<p>(特别说明:当标题宽度等于大于背景图像宽度时的情况)</p>
<h3 class="narrow"><span>h3标题文字</span></h3>
<h3 class="narrow1"><span>h3标题文字</span></h3>
<h3 class="narrow2"><span>h3标题文字</span></h3>
</body>
</html>