Badst' weblog

记得刚接触电脑那会儿，就对windows的设置桌面背景特别感兴趣。 设置背景有3个选项：居中，平铺，拉伸。 居中就相当与css中background的：center no-repat 平铺是background的默认设置。 而拉伸这个功能终于在CSS3中千呼万唤始出来。 语法：background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain 说明：设置背景图片大小，指定背景图片大小或百分比显示。 实例：以下这张图片，原图大小：256px * 256px CSS: color:black; height: 350px; width: 350px; padding: 20px; border: 10px dotted #111; background: #80B3FF url(‘http://badst.org/wp-content/uploads/2012/01/256.jpg’) center no-repeat; background-size: 100%; text-shadow: 0 -1px 1px #fff; 这里是效果图，可以看到背景图片被拉伸到这个div的高度和宽度。 参考资料：http://www.zhangxinxu.com/css3/css3-background-size.php 相关属性：background-clip | background-origin