Css基础学习（五）—颜色、背景与图像

 

使用css来控制网页的颜色、背景和图像也算是将网页的内容与表现分开的一种方式，不过图像并不全是，需要根据图像的性质来决定。那我们就来看看怎么样使用css样式来进行对颜色、背景和图像的控制。

1、文本颜色

前面其实已经使用过文本的颜色，这里就简单的回顾。如：

1. p{color:#f00;}

注意：颜色是一个可以继承的值。如果指定包含元素的div为蓝色，那么所有在被包含的文本（没有指定文本颜色的情况下）都将是蓝色的。

2、背景色

看看事例就可以说明问题了，下面的代码实现了荧光笔的效果。如：

1. p{background-color:#F00;}

3、背景图像

背景图像的控制将是本讲的重点内容了。对背景图像的精确控制可以实现很多的显示，下面就仔细的来说一下。

1. body{background-image:url(tile.gif);}

这个属性就实现背景图的设置了，如果大家添加的图片不是很大的情况下，就可以看见像桌面图片平铺的效果，背景图像不止显示一次。那如果我不希望这样的控制要怎么来设置这个背景呢？下面一个一个的来说明。
(1)关闭平铺

通过设置background-repeat属性来关闭平铺，如下设置：

1. body{
2. background-image:url(tile.gif);
3. background-repeat:no-repeat;
4. }

这样背景图片将只显示一次，并且显示在容器的左上角。

background-repeat属性包括4个可能值：repeat、repeat-x、repeat-y、no-repeat。

repeat就是默认值就不多说了，no-repeat在上面已经使用了；repeat-x和repeat-y这两个值分别用来设置在行或者列方向上平铺图像。

(2)背景图像的定位

如果关闭了平铺，我希望把图像放在指定的位置上，应该怎么样来设置呢？很幸运，css提供了background-position属性，那就来看看这个属性是怎么运作的。

如果你打算在容器的正中间显示背景图像，下面的代码就可以实现：

1. background-position:center center;

background-position包括的值：top left;top center;top right;center left;center center;center right;bottom left;bottom center;bottom right;x-pos y-pos;x-% y-%;

其他的值就不多说了，看看最后两个值是怎么使用的。

1. background-position:50px left;
2. background-position:10% 50%;

(3)背景图像不滚动

有一些情况下，我们希望前面的内容滚动的情况下，背景图像不滚动。而background-attachment就能实现这样的功能。

background-attachment属性可以使用两个值：scroll（默认）和fixed。

(4)背景图像css设置缩写

1. background:#F00 url(tile.gif) right top no-repeat;

缩写需要记住各属性的次序，只要顺序一样，前面的值不设置可以移去。在编写正式的css文件时，尽量使用缩写原则，
不仅可以减少样式表文件的大小，同时还保证了样式表的简洁和可管理性。