导航菜单
首页 >  images/btn_01.jpg  > CSS中代码background:url(图片) no

CSS中代码background:url(图片) no

最近在模仿一个网页的时候,发现CSS代码里有一行代码:background:url(图片) no-repeat right center不明白是什么意思,百度以后学习到了,在此记载知识点;

这一行代码其实是背景图定义形式的简写完整形式是:

background-image:url(图片);background-repeat:no-repeat;background-position:right center

right center是设置图片的初始位置,right是在水平方向上贴容器或浏览器页面的右侧,center是在垂直方向上居中,这两个的顺序是先定义水平位置,再定义垂直位置;

另外一个例子:

background:url(../images/top_ico.png) no-repeat right 14px;

意思是背景图片不重复,在水平方向靠近容器的右侧,在垂直方向距离容器上方14px;

拓展例子,活学活用:.top_menu li { float:left; background:url(../images/top_ico.png) no-repeat right 20px;标签是用于定义列表项目。这行代码意思是每一列包含的背景图片是top_ico.png,图片不重复,靠近列表容器的右侧,距离列表容器上方20px;

第三个例子:

background:url(../images/nav_bg.png) no-repeat -20px -150px;

背景:【背景图片

相关推荐: