CSS背景样式

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的路径)

image

<!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;
}

image

background-image url(图片路径):

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

image

 

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

background-repeat: no-repeat

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

image

当然也可以设置重复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;
}

image

 

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;
}

image

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

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

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

image

 

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>

1111

 

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

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

2222

background-size

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

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

}

image

可以看到,设置了以后,这个图片变的很大

posted @ 2015-01-12 13:19  ﹏猴子请来的救兵  阅读(2535)  评论(0编辑  收藏