搜索
查看: 15904|回复: 29

[教程] CSS属性 background-position ,foreground-position 用法

  [复制链接]

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
发表于 2013-5-24 16:01:37 | 显示全部楼层 |阅读模式
CSS属性 background-position  用于背景图片,foreground-position 用于前景图片,
这两个样式属性用法一样,下面主要介绍 background-position 的用法。

background-position 基本语法如下:
background-position:横坐标 纵坐标

使用两个值指定图像在HTML节点上的显示坐标 - 把节点看成画布,也即相对于画布左上角的坐标(不是指图像的坐标)坐标可以使用用长度值指定,也可以使用百分比( 以画布的大小减去图像大小的剩余空间的百分比作为坐标值,不是指整个画布的百分比

background-position 属性值可提供2个参数值(使用空格分格)。
如果提供两个,第一个用于横坐标,第二个用于纵坐标。如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。

background-position:30px 50px;
使图像自画布左上角向右移动30像素,向下移动50像素,效果如下:
bak.gif

background-position:-50px -30px;
使图像自画布左上角向左反向移动50像素,向上反向移动30像素,效果如下(超出画布左上角的图像是不可见的):
bak5.gif

background-position:50% 50%;
图像居中显示(在指定的HTML节点内水平、垂直居中),
也就是画布大小减去图像大小的剩余空间的50%即横坐标、纵坐标的值。显示效果如下:
bak50p.gif

background-position:100% 100%;
图像在画布右下角( 在指定的HTML节点右下角 )显示,
也就是画布大小减去图像大小的剩余空间即横坐标、纵坐标的值。
bak100p.gif

下面使用 foreground-position属性简单演示一下( background-position的用法是一样的 )
  1. import win.ui;
  2. /*DSG{{*/
  3. winform = win.form( bottom=399;right=599;text="foreground-position 用法演示" )
  4. /*}}*/

  5. import web.layout;
  6. wbLayout = web.layout( winform );
  7. winform.show()

  8. wbLayout.html =/***
  9. <div .file-icon filename="index.html"></div>
  10. ***/

  11. wbLayout.css = /**
  12. div.file-icon {
  13.     width:300px;
  14.     height:200px;
  15.     border:1px #8E886C solid;
  16.    
  17.     behavior:file-icon;/*将filename属性指定的文件名转换为文件图标*/
  18.     foreground-repeat: no-repeat;//图标作为前景图显示
  19.     foreground-position: 50% 50%;
  20. }
  21. **/

  22. win.delay(1000)
  23. wbLayout.queryEle("div.file-icon").style["foreground-position"] = "-5px -5px"
  24. winform.text = "-5px -5px表示图像自画布左上角开始:向左向上反向移动5像素";

  25. win.delay(2000)
  26. wbLayout.queryEle("div.file-icon").style["foreground-position"] = "100% 100%"
  27. winform.text = "100% 100% 表示右下角";

  28. win.loopMessage();
复制代码
再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

43

主题

679

帖子

3805

积分

版主

Rank: 7Rank: 7Rank: 7

积分
3805
 楼主| 发表于 2013-5-24 16:05:38 | 显示全部楼层

[hide]在HTMLayout中 background-position, foreground-position 还可以用来实现九宫格切图, 这时候就需要

在HTMLayout中 background-position, foreground-position 还可以用来实现九宫格切图,
这时候就需要按上、右、下、左的顺序指定四个值以划分切图,详见教程《HTMLayout贴图技术》

再好的编程语言到了不会用的人手里,都会变成恶魔,不幸的是 - 不会用的是大多数。
回复

使用道具 举报

3

主题

20

帖子

149

积分

一级会员

Rank: 2

积分
149
发表于 2013-5-24 16:08:56 | 显示全部楼层

受教了,楼主的帖子发的越来越好了,非常用心,图文并茂的。

受教了,楼主的帖子发的越来越好了,非常用心,图文并茂的。
回复

使用道具 举报

0

主题

29

帖子

274

积分

二级会员

Rank: 3Rank: 3

积分
274
发表于 2013-5-24 18:06:46 | 显示全部楼层

动感十足

动感十足
回复

使用道具 举报

9

主题

204

帖子

1326

积分

四级会员

Rank: 6Rank: 6

积分
1326
发表于 2013-5-24 21:30:42 | 显示全部楼层

谢谢奉献精品教程

谢谢奉献精品教程
回复

使用道具 举报

20

主题

325

帖子

1980

积分

荣誉会员

Rank: 8Rank: 8

积分
1980
发表于 2013-5-24 21:31:55 | 显示全部楼层

教程很棒

教程很棒
回复

使用道具 举报

3

主题

15

帖子

192

积分

一级会员

Rank: 2

积分
192
发表于 2013-5-25 09:15:32 | 显示全部楼层

就想知道forceground的什么意思

就想知道forceground的什么意思

点评

是 foreground 不是 force-ground,foreground 是前景的意思,HTMLayout不但可以指定背景样式,也可以指定前景样式,背景和前景就象前后两个图层叠加显示  发表于 2013-5-25 10:06
回复

使用道具 举报

6

主题

133

帖子

1135

积分

四级会员

Rank: 6Rank: 6

积分
1135
发表于 2013-5-25 10:32:29 | 显示全部楼层

谢谢分享!

谢谢分享!
回复

使用道具 举报

0

主题

11

帖子

89

积分

一级会员

Rank: 2

积分
89
发表于 2013-5-25 11:56:39 | 显示全部楼层

谢谢分享!

谢谢分享!
回复

使用道具 举报

8

主题

97

帖子

650

积分

三级会员

Rank: 4

积分
650
发表于 2013-5-25 12:02:46 | 显示全部楼层

又有新教程,多谢楼主

又有新教程,多谢楼主
回复

使用道具 举报

36

主题

172

帖子

1142

积分

四级会员

Rank: 6Rank: 6

积分
1142
发表于 2013-5-27 11:58:24 | 显示全部楼层

先原理,后配代码实现,图文并茂,非常好

先原理,后配代码实现,图文并茂,非常好
回复

使用道具 举报

2

主题

48

帖子

1192

积分

四级会员

Rank: 6Rank: 6

积分
1192
QQ
发表于 2013-6-3 21:38:19 | 显示全部楼层

编程发的基本都是精品,赞!!

编程发的基本都是精品,赞!!
一曲且为梦中人..
回复

使用道具 举报

5

主题

17

帖子

143

积分

一级会员

Rank: 2

积分
143
发表于 2013-6-4 09:29:23 | 显示全部楼层

图文并茂,真好!

图文并茂,真好!
回复

使用道具 举报

0

主题

1

帖子

6

积分

新手入门

Rank: 1

积分
6
发表于 2013-7-6 14:16:59 | 显示全部楼层

恩,这个还要回复可见,正需要看看呢

恩,这个还要回复可见,正需要看看呢
回复

使用道具 举报

3

主题

23

帖子

148

积分

一级会员

Rank: 2

积分
148
发表于 2013-7-7 18:45:08 | 显示全部楼层

学习下,

学习下,
回复

使用道具 举报

0

主题

3

帖子

21

积分

新手入门

Rank: 1

积分
21
发表于 2013-7-20 18:05:34 | 显示全部楼层

看得出楼主的用心 。。 CSS还是语义化比较好 就比如 background-position:center center; background-po

看得出楼主的用心 。。
CSS还是语义化比较好 就比如
background-position:center center;
background-position:right bottom;

点评

不怎么赞同你的看法,百分比简洁直观调整也方便,而且CSS应当优先使用较短的写法,作为入门教程,去介绍茴香豆的茴字有几种写法未必有多大实用价值。  发表于 2013-7-20 19:16
回复

使用道具 举报

0

主题

6

帖子

1316

积分

四级会员

Rank: 6Rank: 6

积分
1316
发表于 2013-7-24 22:32:36 | 显示全部楼层

我想看下

我想看下
回复

使用道具 举报

8

主题

94

帖子

641

积分

三级会员

叫我何细尔

Rank: 4

积分
641
QQ
发表于 2013-7-25 06:51:07 | 显示全部楼层

前景从没用过,学习一下,留着以后备用

前景从没用过,学习一下,留着以后备用
回复

使用道具 举报

3

主题

19

帖子

99

积分

一级会员

Rank: 2

积分
99
发表于 2013-7-31 23:55:40 | 显示全部楼层

楼主写得很用心,以前还不知道有foreground-position这个属性,感谢了。另外16楼的办法补充也挺好,都提出来,无所谓哪个更好,让大家明白到最重要。

楼主写得很用心,以前还不知道有foreground-position这个属性,感谢了。另外16楼的办法补充也挺好,都提出来,无所谓哪个更好,让大家明白到最重要。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-9-25 19:27 , Processed in 0.093750 second(s), 23 queries , WinCache On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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