元素带圆角背景图片自适应

元素自适应背景圆角图片

　　很多时候，元素的长度不是固定的，这样就不好设置背景图片，尤其是带圆角的背景图片，图片太短也不行，太长也不行。

解决方法如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <style type="text/css">
 5         .bg1
 6         {
 7             background: url(Images/li_hover_03.gif) repeat-x;
 8             height: 38px;
 9             width: 24%;
10         }
11         .bg2
12         {
13             background: url(Images/li_hover_01.gif) no-repeat;
14             height: 38px;
15             width: 100%;
16         }
17         
18         .bg3
19         {
20             background: url(Images/li_hover_05.gif) right no-repeat;
21             height: 38px;
22             width: 100%;
23         }
24     </style>
25 </head>
26 <body runat="server">
27     <div class="bg1">
28         <div class="bg2">
29             <div class="bg3">
30                 <p style="text-align:center; padding-top:10px;">测试测试测试测试</p>
31             </div>
32         </div>
33     </div>
34 </body>
35 </html>


三张图片分别是左侧带圆角图片，中间部分，和右侧带圆角部分。

这样就可以达到元素背景图片自适应功能。

posted @ 2013-08-07 17:16  飘落的枫叶  阅读(166)  评论(0)    收藏  举报