CSS背景样式

时间 2019-12-04

标签 css 背景样式栏目 CSS 繁體版

原文原文链接

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

CSS背景

CSS容许应用纯色做为背景，也容许使用背景图像建立至关复杂的效果，下表是CSS关于背景的一些属性html

属性	描述
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-colorurl

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

background-image url(图片路径):spa

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

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

background-repeat: no-repeat3d

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

固然也能够设置重复x轴，或者重复y，这样有个好处就是能够用很小的图片，而后经过重复x轴，让他变成页面的标题。这样用户在访问这个页面时会很是的快。由于用户访问页面时，计算机会下载资源，而后解析显示出来给用户看。若是下载资源的东西小了。页面显示的速度就会很是快。就像1G须要几个小时，而1K下载不到0.1秒code

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;

}

能够看到，设置了之后，这个图片变的很大