我正在尝试将背景图像应用于li元素。
<ul>
<li class="maintablink"> </li>
</ul>
我的CSS同样是
li.maintablink{background:url(../images/tab_content.png) no-repeat left top;}
即使添加一些宽度：200px;高度：200px以上也不起作用。
我正在使用HTML5 doctype
我有2个与此相关的问题;
背景图片略大，并且不会完全显示在li内。即它间接取决于我的li元素内的内容。我不想在li里面给出任何内容（ 除外）
我该如何解决这个问题？
我正在使用流畅的布局（所有内容都在％，没有px值）...所以我如何给出这个背景图像的宽度/高度......它应该随着浏览器的大小而扩展（我知道）对于页面图像，我们使用img{max-width:100%}）...但是如何使背景图像可扩展？
答案 0 :(得分：3)
听起来你正在寻找CSS background-size属性。
对于可根据容器大小进行扩展的背景：
background-size: auto;
对于固定大小的背景，无论容器大小或实际背景图像如何：
background-size: 150px 200px;
您还可以使用百分比或关键字contain或cover。
有关详细信息，请参阅http://www.css3.info/preview/background-size/。
请注意，background-size现在确实拥有相当不错的浏览器支持，但是一些旧的浏览器（特别是IE8及更早版本，以及Firefox 3.x）不支持它。
如果您需要完全支持这些浏览器，则需要制定一个后备解决方案（可能使用额外的标记和/或Modernizr来确定该功能是否可用）。
答案 1 :(得分：-1)
将背景图像应用于li元素
li 不是块元素，因此在设置宽度和高度之前必须更改
display:inline-block。
可以选择在 CSS 中设置 背景大小 ，您可以按照此{{3} } ,.如果您不想显示 li 元素中的内容，只需将text-indent:-9999px添加到 li css。
请查看此link以了解background-size