PhoneGap中文网

 找回密码
 立即注册
查看: 48882|回复: 5
打印 上一主题 下一主题

CSS3 background-size 自定义背景图片的大小

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-7-19 19:36:10 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式
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>

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

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

  18. </body>
  19. </html>
复制代码
预览效果:





it营
回复

使用道具 举报

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
沙发
 楼主| 发表于 2013-7-19 19:39:34 | 只看该作者
  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>

  15. <div>
  16. <p>这是一对背景拉升的例子。</p>
  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. </div>

  26. </body>
  27. </html>
  28. <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, 下载次数: 620)

css 背景图片拉升

css 背景图片拉升
it营
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-11-23 20:49 , Processed in 0.051929 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表