CSS背景样式

浏览数：122 / 时间：2015年06月09日

CSS是级联样式表，用来表现HTML等文件样式的语言，CSS能够真正做到网页的表现与内容分离的设计语言，也就是说，做好了一款网页，可以通过另一个后缀名是css的文件进行修改其中的样式，不过在html的<head>标签中，需要使用<link>标签来调用css样式表。

CSS背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果，下表是CSS关于背景的一些属性

属性	描述
background-color	设置元素的背景眼睛
background-image url()	把图片设置为背景
background-repeat	设置背景图片是否及如果重复
background-position	设置背景图片的起始位置
backgroud-attachment	背景图像是否固定或者随着页面的其余部分滚动

先创建一个测试用的html，然后用css修改它的背景效果

（注：css样式与html要在同一目录下，否则就需要href属性就要设置调用css的路径）

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 调用css文件，href是css的路径+文件名，没有填路径代表css与html在同一目录下 -->
        <link rel="stylesheet" type="text/css" href="CssStyle.css">
    </head>
    <body>

    </body>
</html>

然后可以创建css样式表来修改html了

background-color

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
}

background-image url(图片路径):

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
    /*在body中增加图片*/
    background-image: url("bt.png");
}

添加图片后，发现图片会铺满整个页面，所以还可以设置background-repeat的属性no-repeat，来使其图片不要重复

background-repeat: no-repeat

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
    /*在body中增加图片*/
    background-image: url("bt.png");
    /*设置图片不要重复*/
    background-repeat: no-repeat;
}

当然也可以设置重复x轴，或者重复y，这样有个好处就是可以用很小的图片，然后通过重复x轴，让他变成页面的标题。这样用户在访问这个页面时会非常的快。因为用户访问页面时，计算机会下载资源，然后解析显示出来给用户看。如果下载资源的东西小了。页面显示的速度就会非常快。就像1G需要几个小时，而1K下载不到0.1秒

background-repeat: repeat-x;

background-repeat: repeat-y;

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
    /*在body中增加图片*/
    background-image: url("bt.png");
    /*设置图片只重复x轴*/
    background-repeat: repeat-x;
}

background-position;

这个是用来设置图片的初始位置，可以直接填写x,y轴的坐标。也可以填写right、left、center来布局位置，不过在使用right时，需要通过top来固定顶点，要么图片默认会上下居中的。

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
    /*在body中增加图片*/
    background-image: url("bt.png");
    /*设置图片不重复*/
    background-repeat: no-repeat;
    /*设置图片的初始位置*/
    background-position: right;
}

上图就是没有设置top，导致图片的y轴默认是center的，现在来设置top

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
    /*在body中增加图片*/
    background-image: url("bt.png");
    /*设置图片不重复*/
    background-repeat: no-repeat;
    /*设置图片的初始位置*/
    background-position: right top;
}

可以发现，图片长了不少。。。我的这个图片太小了，看起来效果不那么明显，如果是一张照片，就会看到，在没有设置top的时候，图片的靠右，并且上下居中的，导致图片缩进了浏览器边缘，没有显示全

backgroud-attachment

这个是将图片固定在页面上，当你文章很长的时候，你拖动滚动条，图片不会因为滚动条而消失

把html文件的body中，多加点空格，来让滚动条出现

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 调用css文件，href是css的路径+文件名，没有填路径代表css与html在同一目录下 -->
        <link rel="stylesheet" type="text/css" href="CssStyle.css">
    </head>
    <body>
    <br /><h1>测试用的数据</h1><br /><br /><br /><br /><br /><h2>测试用的数据</h2><br /><h2>测试用的数据</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h1>测试用的数据</h1><br /><br /><br /><br /><br /><br /><h2>测试用的数据</h2><br /><br /><br /><br /><br /><h2>测试用的数据</h2><br /><br /><br /><br /><br /><br /><br /><br /><h2>测试用的数据</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><h2>测试用的数据</h2><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </body>
</html>

来设置backgroud-attachment，使图片固定

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
    /*在body中增加图片*/
    background-image: url("bt.png");
    /*设置图片只重复x轴*/
    background-repeat: repeat-x;
    /*设置图片固定，不会随着滚动条向下滚动时而消失*/
    background-attachment: fixed;
}

background-size

规定背景图片的尺寸，可以自己定义。这个标签是CSS3才有的

body{
    /*修改body背景颜色*/
    background-color: #7DBBDA;
    /*在body中增加图片*/
    background-image: url("bt.png");
    /*设置图片不重复*/
    background-repeat: no-repeat;
    /*自定义图片大小*/
    background-size: 100px 500px;

}