当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 特效 - 花园之门(二)

点击数:21802013-09-06 12:22:38 来源: 海盈网络

而若是想设定背景颜色,则需要将background-color属性设置为颜色值(十六进制颜色值、十六进制颜色缩写、RGB颜色或者颜色名称均可)。

background-color: black;
也可以使用background缩略属性同时定义背景颜色、背景图像以及其他属性:

body {
background: #000 url(background.png) -30px 0px no-repeat fixed;
}

door to my garden中另外一个常用的效果是将background-color设置为transparent.以便让元素背景变成透明。例如该作品中链接就应用了透明背景:

color: #eee,
background: transparent;
text-decoration: none;

背景的黏附( Attaching)属性

background-attachment属性可以接受scroll和fixed两个值,浏览器的默认值是scroll,也就是说背景图像会跟随页面一起滚动。若是设定为fixed,背景将不会随页面内容一起滚动(图6-5-2)o Lauke设置的作为页面背景的图像就是一个例子:

body {
background: #000 url(background.png) -30px Opx no-
repeat fixed;
}

4。背景的定位属性

background-position属性定义了背景图片在父元素中的相对位置,它可以接受两个百分比、长度或关键字值,分别用来表示两个坐标值中的一个。如果同时设置了两个,那么第一个值表示水平位置,第二个值表示垂直位置:

background-position: lOpx ,20px;

如果只设定了一个值,那么它将表示水平位置,而垂直位置将取默认的500<,或者居中。上面的声明将把图片置于水平10个像素、垂直20像素的位置上。可以看到,Lauke的作品中均使用了长度值:

body {
background: #000 url (background.png) -30px Opx no-
repeat fixed;
}

其中有一条很有意思的设置,将水平位置定为-30pxo负值在背景定位中是合法的,它的效果和设定正值相反,会将图片向左平移30个像素。而垂直方向的O像素设定也会让背景图像恰好位于body元素的上边界。图6-5-3和图6--5-4比较了设定负值后的变化,图6-5-3是正常情况下浏览器中显示的样式,图6-5-4是水平位置为负值时的样式。

5.控制背景平铺

单纯使用HTML无法控制背景重复——默认情况下浏览器会把背景图片同时在x轴和y轴上平铺。所幸CSS的background-repeat属性给了我们更多选项。

background-repcat属性可以设定为以下几个值:repeat-x使背景仅在x轴上平铺;repeat-y使背景仅在y轴上平铺;no-repeat使背景不平铺;repeat使背景同时在x、y轴上平铺,这也是该属性的默认值o Lauke在background属性中使用了no-repeat:

body{
background: #000 url(background.png) -30px Opx
no-repeat fixed;
{
这样的设定保证了图片不会被平铺。虽然书中并没有逐一列出其他部分的代码,但door to my garden中所有的背景均没有平铺设定。


本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作、网站维护等全方位专业服务,欢迎咨询。

【责任编辑:(Top) 返回页面顶端