CSS3 background-size 属性

实例

规定背景图像的尺寸：

  1. div
  2. {
  3. background:url(img_flwr.gif);
  4. background-size:80px 60px;
  5. background-repeat:no-repeat;
  6. }

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

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

定义和用法

background-size 属性规定背景图像的尺寸。

默认值： auto
继承性： no
版本： CSS3
JavaScript 语法： object.style.backgroundSize="60px 80px"

语法

  1. background-size: length|percentage|cover|contain;
值 描述
length 设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

实例

拉伸背景图像

拉伸背景图像来完全覆盖内容区域。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. div
  6. {
  7. background:url(/i/bg_flower.gif);
  8. background-size:35% 100%;
  9. -moz-background-size:35% 100%; /* 老版本的 Firefox */
  10. background-repeat:no-repeat;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div>
  17. <p>这是一个段落。</p>
  18. <p>这是一个段落。</p>
  19. <p>这是一个段落。</p>
  20. <p>这是一个段落。</p>
  21. <p>这是一个段落。</p>
  22. <p>这是一个段落。</p>
  23. <p>这是一个段落。</p>
  24. <p>这是一个段落。</p>
  25. <p>这是一个段落。</p>
  26. </div>
  28. </body>
  29. </html>

拉伸背景图像，对背景图像水平复制四次

对背景图像进行拉伸，以使背景图像恰好水平复制四次。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. div
  6. {
  7. background:url(/i/bg_flower.gif);
  8. background-size:25%;
  9. border:2px solid #92b901;
  10. }
  11. </style>
  12. </head>
  13. <body>
  15. <div>
  16. <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
  17. <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
  18. <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
  19. <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
  20. <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
  21. <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
  22. </div>
  24. </body>
  25. </html>

相关页面

CSS3 教程：CSS3 背景