好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

background-size设置背景图片的大小_html/css_WEB-ITnose

background-size

设置背景图片的大小,以 长度值 或 百分比 显示,还可以通过 cover 和 contain 来对图片进行伸缩。

语法:

background-size: auto |   |   | cover | contain 

取值说明:

1、auto :默认值,不改变背景图片的原始高度和宽度;

2、 :成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来 等比缩放 ;

3、 :0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

4、cover :顾名思义为 覆盖 ,即将背景图片等比缩放以 填满整个容器 ;

5、contain :容纳,即将背景图片等比缩放至 某一边紧贴容器边缘为止 。

提示: 大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

      背景图片大小  .demo {    background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;    width: 300px;    height: 140px;    border: 1px solid #999;    background-size:cover;}      

查看更多关于background-size设置背景图片的大小_html/css_WEB-ITnose的详细内容...

  阅读:39次