css滑动门技术[摘自网络]-优快云博客

本文介绍如何通过修改HTML中H3标记的CSS宽度属性来实现文本与背景图案的完美对齐，确保美观的同时不破坏两端的装饰图案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是背景图像：

标题文字

说明：你只需要修改h3标记CSS中的width属性即可，只要宽度不超过背景图像的总宽度即可。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
               "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>标题文字</TITLE>
<META http-equiv=Content-Language content=en-us>
<META content="MSHTML 6.00.5730.13" name=GENERATOR>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>

h3{
    font-size:13px;
    line-height:21px;
    text-align:center;
    width:200px;  /*修改这个值即可改变宽度，且保持两端的花纹*/
    background-image:url(http://learning.artech.cn/uploads/blog-images/bg.gif);
    background-repeat:no-repeat;
    padding-left:40px;  /*使底部背景的左侧图像显示出来*/
}

span{
    display:block;
    padding-right:40px;  /*为了使上面的文字居中*/
    background-image:url(http://learning.artech.cn/uploads/blog-images/bg.gif);
    background-repeat:no-repeat;
    background-position:right;  /*上边背景图片从右往左显示，用于显示右侧小图像*/
}

</STYLE>
</HEAD>
<BODY>
<P>这是背景图像：<IMG src="http://learning.artech.cn/uploads/blog-images/bg.gif"></P>
<H3><SPAN>标题文字</SPAN></H3>
<P>说明：你只需要修改h3标记CSS中的width属性即可，只要宽度不超过背景图像的总宽度即可。</P>
</BODY>
</HTML>

转载于:https://www.cnblogs.com/hejunrex/archive/2010/01/21/1653457.html