浮桥街电脑培训网页编程设计-CSS知识之 backgrou

浮桥街电脑培训网页编程设计-CSS知识之 background-size 用法详细介绍


background-size是CSS3新增的比较实用的属性,使用它可以随心所欲地控制背景图的显示大小,而在css2中背景图的大小是不可控制的。

基本语法:

  • 用于设置背景图片的大小,有2个可选值,第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定1个值得,则第2个值默认为auto;

  • 初始值:auto;

  • <length>由浮点数字和单位标识符组成的长度值,不可以为负值;
  • <percentage>取值0%都100%之间的值;

  • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

  • contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

  • 兼容性:IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

 

例一:

图片默认宽度:200*160px

复制代码
div{
    width: 400px;
    height: 260px;
    border: solid 1px red;
    margin: 60px auto;
    background: url('images/img00.jpg') no-repeat;
    background-position: 0% 0%;
    background-size: auto auto;
}
复制代码

 

例二:background-size: 25%

 

例三:background-size: 150px 100px

 

例四:background-size: cover

 

例五:background-size: contain

最新资讯

技术文章

广告设计合作