PhoneGap中文网

标题: CSS3 background-size 自定义背景图片的大小 [打印本页]
作者: admin    时间: 2013-7-19 19:36
标题: CSS3 background-size 自定义背景图片的大小
CSS3 background-size 属性

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

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
例子 1

调整背景图片的大小：
简单示例：
div
  1. {
  2. background:url(bg_flower.gif);
  3. -moz-background-size:63px 100px; /* 老版本的 Firefox */
  4. background-size:63px 100px;
  5. background-repeat:no-repeat;
  6. }
复制代码
完整示例：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body
  6. {
  7. background:url(/i/bg_flower.gif);
  8. background-size:63px 100px;
  9. -moz-background-size:63px 100px; /* 老版本的 Firefox */
  10. background-repeat:no-repeat;
  11. padding-top:80px;
  12. }
  13. </style>
  14. </head>

  16. <body>
  17. <p>上面是缩小的背景图片。</p>

  19. <p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>

  21. </body>
  22. </html>
复制代码
预览效果：





作者: admin    时间: 2013-7-19 19:39
  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>
  30. <img src="http://bbs.phonegap100.com/forum.php?mod=image&aid=20&size=300x300&key=49e50d20f43a691c&nocache=yes&type=fixnone" aid="attachimg_20" alt="" border="0">
复制代码

2.jpg (27.66 KB, 下载次数: 609)

css 背景图片拉升

css 背景图片拉升
作者: admin    时间: 2013-9-27 15:48
好好 学习了 确实不错
作者: phonegap100    时间: 2013-9-28 07:38
有竞争才有进步嘛
作者: admin    时间: 2013-9-30 02:14
不知该说些什么。。。。。。就是谢谢
作者: phonegap100    时间: 2013-10-1 02:57
这是什么东东啊



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2