html - 使用按钮的背景图像。如何根据文本的长度调整按钮的大小？

Question

我刚开始学习html和css。我正在为我的按钮使用背景图像。如何调整按钮的大小以使所有文本都适合它。

这是我的CSS代码

#header a{
display: compact;
background: url("images/tab.gif") no-repeat scroll left top transparent;
color: #FFFFCC;
text-decoration: none;
padding: 0.75em 1em .025em;
background-size: contain;
}

继承人的html：

<ul>
<li> <a href="">Overview</a> </li>
<li> <a href="">This text is too long</a></li>
</ul>

Answer 1

试试这个 - 它比使用更向后兼容background-size:cover。

的HTML：

<ul>
<li> <a href="">Short Menu Item</a> </li>
<li> <a href="">Much Longer Menu Item</a></li>
</ul>

和CSS：

ul {
    margin-left:0 ;
    padding-left:0 ;
    list-style-type:none ;
}

li {
    margin:12px 0 !important ;
}

a {
    color: #FFFFCC;
    text-decoration: none;
    text-align:left ;
    padding:4px ;
    background: url("http://d-grafix.com/textures/2006-07-31/2006-07-31-seamless-grass-9613645-thumb.jpg") ;
}

演示在这里：http: //jsfiddle.net/Kg5D6/1/