background背景图片png的相关问题

[url]http://zhidao.baidu.com/question/534583330.html[/url]
[color=blue]background: url("/static/home/index/img/body_back_3107edb8.png") repeat-x scroll 0 95px transparent; [/color]
求解释 repeat-x scroll 0 95px transparen分别是什么意思。
-----------------------------
简单来说,这是background 属性的一个简写形式,它用来设置所有的背景属性。
想理解它,我们从原理来说,比较好理解一些,先来看看background可以按顺序设置哪些属性:
[b]background-color[/b]   规定使用的背景颜色
[b]background-image[/b]   规定使用的背景图像
[b]background-repeat[/b]   规定如何重复背景图像
[b]background-attachment[/b] 规定背景图像是否固定或者随着页面的其余部分滚动。
[b]background-position[/b] 规定背景图像的位置
[b]inherit[/b]        规定应该从父元素继承 background 属性的设置

如果不设置其中的某个值,也是被允许的,只要跳过不写即可。
现在对照楼主的样式,就好理解啦~~
url:设置背景图片的地址,也就是background-image
repeat-x:对应的就是background-repeat如何重复背景图像,这里的重复方式是横向平铺,与之对应的还有repeat-y竖向平铺,如果想水平和垂直方向都重复,那么只要写repeat 即可。
scroll:对应的就是background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动,这里就是规定背景图像随着页面的其余部分滚动,如定义fixed则是规定背景图像固定。
0 95px:这两个值要一起来看。background-position 规定背景图像的位置,第一个是水平位置,第二个是垂直位置,所以,这两个值就是定义背景图像从水平位置0,垂直位置95px这样的一个位置(再结合上面的repeat-x)开始横向平铺。
transparent:这个从单词就可以看出来是定义透明,这个没有上面的属性来对应,我们平时定义背景图像时,是不需要写它的,因为不写就是这个默认值。

[color=blue]#nav {
background: url("http://misc.360buyimg.com/lib/skin/2012/i/20111221C.png") repeat-x scroll 0 -315px #D00000;
height: 40px;
}[/color]
就是找到20111221C.png图片,左上角是0 -315px,没图片处使用#D00000替换,做repeat-x方向平铺,高度使用图片的Y轴范围时:-315+40(下面的hight决定)

[color=blue]background-position:500px 15px;[/color]
背景图片从容器(container)左上角的地方向[color=red][b]右移[/b][/color]500px,向[b][color=red]下移[/color][/b]15px,超出的部分隐藏。

[color=blue]background-position:-500px -15px;[/color]
背景图片从容器(container)左上角的地方向[color=red][b]左移[/b][/color]500px,向[color=red][b]上移[/b][/color]15px,超出的部分隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值