PHP全栈开发(八):CSS Ⅲ background

2022-11-18,,,

设置背景颜色:

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的相关教程结束。

《PHP全栈开发(八):CSS Ⅲ background.doc》

下载本文的Word格式文档,以方便收藏与打印。