所谓CSS,是Cascading Style Sheet 的缩写,译作“层叠样式表单”,简称“样式表”,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
jimdo模板采用CSS+DIV(HTML)结构,背景颜色和背景图片的设置,都是在CSS里进行的。
背景的属性是background,它是一个复合属性,包含很多参数,比如color、image、repeat等等,可以统一简写为background。详细内容请看CSS手册,这里只简单介绍一下使用。
一、背景颜色
一般简写为 background:#xxx,或background:#xxxxxx,其中“X”为十六进制的“0-F”,也可以用三基色RGB或英文单词表示。
比如设置背景色为白色,则表示为 backgrund:#fff,或backgrund:#ffffff,这个比较简单。
二、背景图片
一般简写为 background: url(url),使用绝对或相对url地址指定背景图片。
在jimdo网站上,如果是从“自己的版面设计”下的“文件”里上传的图片,则url 可以直接使用图片名称(包括扩展名)。比如上传的背景图片文件为bg.jpg,则可以直接这样写 background:url(bg.jpg)。 如果是从页面上上传的图片做背景,则url一定要是图片文件的实际地址。比如图片地址为http://jdm.jimdo.com/s/cc_images/cache_1349038004.png,则它的写法为 background:url(http://jdm.jimdo.com/s/cc_images/cache_1349038004.png?t=1255018794)。 设置网页背景图片时,有时候图片的大小不一定正好布满网页,这时候就存在填充的问题。比如一张图片,它的宽度和页面一样,而高度上,由于页面的高度是随网页内容而变化的,因此是不确定的。如果要想便所有页面的背景都充满背景图片,这时在垂直方向上,必须使图片重复出现,它的用法是repeat-y,即在垂直方向上图片填充整个层,相应的,水平方向上是 repeat-x。如果不需要重复,则为no-repeat ,即仅显示图片大小而不填充满整个层。另外,设置背景图片时,往往要同时给背景加上背景色,这时候,背景色处于底层,背景图片位于背景色之上。
下面举个实例,这样可能容易明白一些,比如:
background:#ccc url(bg.jpg) top left no-repeat;
它的意思是:
1、使用#CCC(灰度色)作为整个层的底色,使用 bg.jpg 做为背景图片,它覆盖在背景色之上;
2、top left 表示图片位于当前层的左上端,no-repeat 表示仅显示图片大小而不填充满整个层;如果是 repeat-x,则表示在水平方向上填充整个层,repeat-y表示在垂直方向上填充整个层。
在jimdo网站上,它实际上存在着三个层。
1、body 它处于网页的最底层,相当于一张画的画布。我们用浏览器打开一个网页时,首先看到的就是这一层。很多版面宽度不够显示器全屏的网页,两边显示出来的空白区,就是这一层。
2、container 它的意思是容器,也就是一个网页的内容,都是建立在这一层上的,而它又是处于body之上的。我们说的版面宽度,就是由它决定的。
3、header(头部)、navigation(导航栏)、content(内容区)、sidebar(广告盒)、footer(底部) 这些网页的实际内容,它们处于同一层,处于最顶层。
上述三层,都可以在CSS里对它们设置背景色和背景图片。写到这里,也告诉大家一个技巧,就是我们在调试代码时,可以临时给各个层加上不同的背景色,从而很直观的看到各个层、各个部分在位置上是否存在问题,以便于调整。
Write a comment
littlebear (Sunday, 09 May 2010 00:09)
没人来顶?
诸葛草帽 (Sunday, 09 May 2010 07:24)
回复littlebear:呵呵,感谢支持!
littlebear (Sunday, 09 May 2010 07:59)
恩, 我收藏了~
诸葛草帽 (Sunday, 09 May 2010 08:04)
回复littlebear:呵呵,你的网站音乐不错!
littlebear (Tuesday, 15 June 2010 10:15)
音乐? 那里?
诸葛草帽 (Wednesday, 16 June 2010 07:56)
回复littlebear:以前去你那里有的,背景音乐
qingyuanpoetry (Monday, 20 January 2014 12:13)
如何设置背景图片啊,我用的30天免费版的,没有找到啊
Peggie Gaccione (Tuesday, 24 January 2017 17:04)
When some one searches for his required thing, so he/she wants to be available that in detail, therefore that thing is maintained over here.
Ulysses Calder (Tuesday, 24 January 2017 18:11)
Hello, constantly i used to check website posts here early in the break of day, as i enjoy to learn more and more.