PHP全栈开发（八）：CSS Ⅲ background

设置背景颜色：

div

{

    background-color:#b0c4de;

}

不仅可以给body标签设置背景颜色，还能给p，div，h标签设置背景颜色

设置背景图片：

body

{

    background-image:url('image/bg1.gif');

}

url后面跟的是背景图片的路径。

假如我们的背景图片是一个小方块，那么这个小方块默认情况下会沿着X轴和Y轴平铺过去。

但是有些图片是沿着Y轴渐变的，那么沿着Y轴平铺的话，会显得很怪异。

所以我们可以设置这个背景图片只沿着X轴平铺，用一下这段代码：

body

{

    background-image:url('image/bg2.gif');

    background-repeat:repeat-x;

}

表示只沿着x轴平铺，repeat-y表示只沿着y轴平铺

如果你不想让图片平铺，就使用

body

{

    background-image:url('image/bg2.gif');

    background-repeat:no-repeat;

}

有的图片，假如我们放在最上面，那么随着页面的滚动，它就没有了。

当然我们不希望这种情况发生！我们希望它一直在那不动！！

我们如何做到呢，用下面的代码：

body

{

    background-image:url('image/a1.jpg');

    background-repeat:no-repeat;

    background-position:top;

    background-attachment:fixed;

}

首先我们定义一个小一点的图片作为背景。

然后这个图片当然是不能平铺啦，把图片默认的平铺的属性去掉。

然后我们把它的位置放在最上方的中间。

然后这里 background-attachment 的值是 fixed 就表示是固定的

background-attachment的属性值一共有三种，一种是scroll，表示跟随页面滚动，如果不设置的话，默认是这个。

一种是fixed，表示是固定的。

还有一种是inherit表示从父元素继承。

我们看到上面还有一个属性我们没有介绍，就是background-position

这个表示背景图片所在的位置，可以设置成如下属性值：

background-position:left top;

background-position:left center;

background-position:left bottom;

background-position:right top;

background-position:right center;

background-position:right bottom;

background-position:center top;

background-position:center center;

background-position:center bottom;

分别是水平坐标值和垂直坐标值。如果只指定一项的话，那么另一项默认是center

除了可以指定这些位置之外，还可以用css里面通用的一些单位来指定图片的位置

比如说水平和垂直的百分比%和像素px都可以

body

{

    background-image:url('image/a1.jpg');

    background-repeat:no-repeat;

    background-position:1000px 500px;

    background-attachment:fixed;

    background-size:200px;

}

上面代码指定的position基本上是网页的右下角了。

还有一个我们在指定背景图片的时候经常遇到的问题。

就是我们在设置背景图片的时候，常常下载的图片很大，像素很高，如果按照图像原来的像素比例输出的话，那么对于我们的网页是不合适的。

我们需要重新放到PS或者其他软件里面进行图片像素的调整吗？

这个是很麻烦的。同样CSS提供了设置背景图片大小的属性

就是上面设置的 background-size

这个属性的值有如下几个，一个是CSS通用的单位，百分比%或者像素px都可以。

这个background-size的属性我们在css教程的首页是看不到了，我们要到css参考手册里面去看css的属性，那里列出了css的全部属性，供我们参考。

当然background除了这些常用的属性之外，还有其他少量不常用的属性，都可以在css属性列表里去查。

今天我们的CSS background属性的讲解就到这里。

我们回顾一下这节所讲的内容background，这个是用来设置各种标签的背景的，背景可以是纯颜色，也可以是图片。如果是图片的话还提供了图片的位置，大小，是否随网页移动等属性值可以设置，可以说是非常全面了。但是始终要记得这是背景设置属性，而不是图片属性。

今天的内容就到这里吧。

巴特西

PHP全栈开发（八）：CSS Ⅲ background

最新文章

热门文章