【css】使用background设置网页背景

一、背景属性

1. 背景颜色

使用background-color属性设置背景颜色

background-color: #ccc;  背景颜色为灰色

2. 背景图片

使用background-image属性设置背景图片

background-image: url(img/pic.gif);  设置背景图片为pic.gif

3. 背景图片平铺

使用background-repeat属性设置背景图片平铺方式

background-repeat: repeat 平铺（默认）
background-repeat: no-repeat 不平铺
background-repeat: repeat-x 沿x轴平铺
background-repeat: repeat-y 沿y轴平铺

图3-1背景图片平铺

图3-2 沿x轴平铺

图3-3 沿y轴平铺

背景平铺的作用很多哦，比如我们现在想设置这样一张400*300的图片作为背景：

图3-4 所需背景

可以看到这张图片的渐变是有规律的，我们完全可以把背景截成一张宽度为1px的图片，然后沿x轴平铺，达到同样效果。

图3-5 实际插入的背景进行x轴平铺

遇到有规律的背景就可以利用平铺操作，在移动端还可以节省用户的流量哦。

4. 背景图片定位

使用background-position属性设置背景图片定位，如果背景图片平铺，那么这个位置即为第一张图片的位置，然后向对应方向平铺。

background-position: 两个值；
第一个值表示x轴的位置  第二个值表示y轴的位置

background-position: 一个值；
这个值表示x轴的位置  y轴默认是center

值可以采用的形式：

left top right bottom center
px
%

5. 背景图片滚动

使用background-image属性设置背景图片背景图片是否跟随页面其他部分的滚动而滚动

background-attachment:fixed 不跟随其他部分的滚动而滚动（固定在某个位置）
background-attachment:scroll 跟随页面其他部分的滚动而滚动（默认）

选择一张图片作为body背景，放置于右上角不平铺，放置一个很长的div，使滚动条出现，来体验背景滚动：
css:

        body{
            background-image: url("opao.png");
            background-repeat: no-repeat;
            background-position:right top;
        }
        div{
            width:100px;
            height:1000px;
            background-color: pink;
        }

图1-1 滚动条出现

我们不写background-attachment的时候，默认是滚动的（scroll）

图1-2 滑动后背景向上滚动

当我们在body样式内加入background-attachment: fixed; 就不会滚动了哦！

        body{
            background-image: url("opao.png");
            background-repeat: no-repeat;
            background-position:right top;
            background-attachment: fixed;
        }

图1-3 背景不随其它元素滚动

二、复合写法

background: pink url(img/pic.gif) no-repeat right top fixed;
/*粉色 背景图片为pic.gif 不平铺 图片放于右上角 不滚动*/
顺序：颜色 背景图片 是否平铺 x轴位置 y轴位置 是否滚动
（背景和颜色至少写一个，其它可省略，默认为平铺，左上角，滚动）

最后编辑于：2019.06.22 16:15:28