PHP全栈开发：CSS Ⅲ background

Posted 2020-12-28 秋天的蒙奇奇

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
}