[英]CSS background image for fluid layouts
I am trying to apply a background-image to a li element. 我正在尝试将背景图像应用于li元素。
<ul>
<li class="maintablink"> </li>
</ul>
My CSS for the same is 我的CSS也是如此
li.maintablink{background:url(../images/tab_content.png) no-repeat left top;}
Even adding some width:200px;height:200px above does not work. 甚至添加一些宽度:200px;高度:200px以上不起作用。
I am using HTML5 doctype 我正在使用HTML5 doctype
I have 2 questions related to this; 我有两个与此相关的问题;
The background image is slightly bigger and does not display fully inside the li. 背景图像略大,并且不会完全显示在li内。 ie it indirectly depends on the content inside my li element.
即它间接取决于我的li元素内的内容。 I do not want to give any content inside li (except
) How do I fix this issue ? 我不想在li里面提供任何内容(除了
)如何解决这个问题?
I am using fluid layout (everything in %, no px value)...So how do I give the width/height for this background-image...It should scale with the browser size (I know for page images, we use img{max-width:100%}
)...But how do I make background-images scalable ? 我正在使用流体布局(所有内容都是%,没有px值)...所以我如何给出这个背景图像的宽度/高度...它应该随浏览器大小而扩展(我知道页面图像,我们使用
img{max-width:100%}
)...但是如何使背景图像可扩展?
It sounds like you're looking for the CSS background-size
property. 听起来你正在寻找CSS
background-size
属性。
For a background that is scalable according to the size of the container: 对于可根据容器大小进行扩展的背景:
background-size: auto;
For a background that is a fixed size, regardless of the size of the container or the actual background image: 对于固定大小的背景,无论容器大小或实际背景图像如何:
background-size: 150px 200px;
You can also use percentages, or the keywords contain
or cover
. 您还可以使用百分比,或关键字
contain
或cover
。
See http://www.css3.info/preview/background-size/ for more info. 有关详细信息,请参阅http://www.css3.info/preview/background-size/ 。
Please note that background-size
does have quite good browser support now, but some older browsers (in particular IE8 and earlier, but also Firefox 3.x) do not support it. 请注意,
background-size
现在确实有很好的浏览器支持,但是一些旧的浏览器(特别是IE8和更早版本,以及Firefox 3.x)不支持它。
If you need to support these browsers fully, you will need to work out a fall-back solution (probably using additional markup and/or Modernizr to determine whether the feature is available). 如果您需要完全支持这些浏览器,则需要制定一个后备解决方案(可能使用额外的标记和/或Modernizr来确定该功能是否可用)。
Apply a background-image to a li element 将背景图像应用于li元素
li is not a block element so you must be change
display:inline-block
before you set width and height.li不是块元素,因此在设置宽度和高度之前必须更改
display:inline-block
。
There is an option to set background-size in CSS you can follow this link ,. 可以选择在CSS中设置背景大小 ,您可以按照此链接进行操作 。 If you don't want to show your content from li element just put the
text-indent:-9999px
to you li css. 如果你不想从li元素中显示你的内容,只需将
text-indent:-9999px
放到你的li css中。
Check out this demo for testing background-size
查看此演示以测试
background-size
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.