CSS3的background-size属性


关键词

CSS3 background-size

摘要

本文介绍在CSS3中新增加的 background-size 属性,它可以用来设置背景图片的尺寸大小。

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

div
{
    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属性,本文就介绍这么多,希望对您有所帮助,谢谢!

 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:CSS3的background-size属性:http://www.splaybow.com/post/background-size.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程中有任何疑问,洪哥以此为饭碗,请加QQ:115085382!
了解更多好文章,请关注我们的新浪微博和腾讯微博
亲,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« 如何禁止复制网页内容 $(document).ready与window.onload的区别 »