流体布局的CSS背景图像

我想将背景图像应用于li元素。流体布局的CSS背景图像

<ul> 
<li class="maintablink">&nbsp;</li> 
</ul>

我对相同的CSS是

li.maintablink{background:url(../images/tab_content.png) no-repeat left top;}

即使增加了一些宽度：200像素，高度：200像素以上不起作用。

我使用HTML5的doctype

我有2个与此相关的问题;

背景图像稍大，并不完全显示在里面。即它间接依赖于我的元素里面的内容。我不想在里面提供任何内容（ 除外）如何解决此问题？我怎么给这个背景图像的宽度/高度...它应该与浏览器的大小（我知道的页面图像，我们使用img{max-width:100%}）...但是如何让背景图像具有可伸缩性？

来源

2011-10-11 testndtv

这听起来像你正在寻找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来确定该功能是否可用）。

来源

2011-10-11 09:43:29 Spudley

THX很多......所以，当我们说的背景尺寸：汽车;它是否按照背景图像自身的宽度/高度或者我们赋予该元素本身或赋予其元素的宽度/高度？ – testndtv

-1

应用背景图像到li元素

李不是块元件，所以你必须改变display:inline-block设置宽度和高度之前。

有设置背景大小CSS你可以按照这个link一个选项。如果你不希望显示来自李元素内容只是把text-indent:-9999px你李 CSS。

看看这个demo测试background-size

来源

2011-10-11 09:55:18 kst

我只是尝试添加显示：inline-block; width：300px; height：300px; background：url（../ images/tab_content.png）no-repeat left top; background-size：auto;到我的元素CSS ...但仍然无法工作.. – testndtv

@testndtv我编辑了我的答案。 – kst

Thx ...在你的jsfiddle演示中，如果我删除，固定的px宽度/高度，它不起作用...这就是我正在寻找...没有px尺寸..只有相对像％尺寸。。 – testndtv

流体布局的CSS背景图像

回答

相关问题