先看看下面这段CSS3的代码:

    background:url(bg.png);

    background-size:100px 60px;

    background-repeat:no-repeat;

}

background-size属性是CSS3中引入的,可以控制背景图片的尺寸的。做前端的兄弟们肯定明白它的好处。

支持该属性的浏览器及版本:

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

在JavaScript中调用该属性:

object.style.backgroundSize="100px 60px"

background-size属性的取值:

length|percentage|cover|contain;

length是直接用像素;

percentage百分比;

cover如果背景图片不够覆盖整个对象,则拉大背景。如果背景图片比对象大,则不做任何变化。

contain设置背景图片的尺寸(宽度与调试)与对象完全一样。

关于CSS3的background-size属性,本文就介绍这么多,希望对您有所帮助,谢谢!

03-14 09:40