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;

}

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

CSS背景样式的更多相关文章

  1. 认识CSS中css背景样式设置

    前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...

  2. HTML学习笔记 CSS背景样式案例 第六节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS背景样式和列表样式

    background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...

  4. css背景样式background

    background用来定义html元素的背景效果 background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法 1.十六进制方式,如"#ff0000" 2 ...

  5. CSS设置边框、符号、背景样式、链接属性

    一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...

  6. CSS中如何使用背景样式属性，看这篇文章就够用了

    css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...

  7. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  8. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  9. CSS基本样式-背景属性

    代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...

随机推荐

  1. ios-获取商店已上线app信息

    NSString *url = [[NSString alloc] initWithFormat:@"http://itunes.apple.com/lookup?id=%@",@ ...

  2. uglifyjs压缩批处理

    uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感. uglifyjs压缩批处理我们不可能每次都打开cm ...

  3. innodb_buffer_pool_size 大小建议

    innodb_buffer_pool_size参数大小建议: 查看Innodb_buffer_pool_pages_data大小,即已使用页面 MySQL> SHOW GLOBAL STATUS ...

  4. PHP获取POST数据的几种方法汇总

    一.PHP获取POST数据的几种方法 方法1.最常见的方法是:$_POST['fieldname']; 说明:只能接收Content-Type: application/x-www-form-urle ...

  5. 【ionic】Mac IOS下真机调试

    模拟调试不能保证真机一定没问题,所以真机调试是非常必要的一步 IOS设备 启用设备调试 在IOS设备中(Iphone,Ipad)中开始web检测器 设备->safari->高级->w ...

  6. CGContextAddCurveToPoint 的深入理解

    CGContextAddCurveToPoint 这个函数看上去一般般,仔细琢磨发现不简单,为什么三个点就可以确定一条曲线呢? 网上查了查,小小研究了一下下. 1.关键知识 窃取自 (http://l ...

  7. H5页面性能优化

    对于一个产品,性能在用户体验中是必不可缺的一环.性能优化是个长远的事情,联想到导航项目,列出以下性能优化的方案: 一. 基本的代码层面优化: 1:合理使用css 1)正确使用Display属性 Dis ...

  8. 白话学习MVC(十)View的呈现二

    本节将接着<白话学习MVC(九)View的呈现一>来继续对ViewResult的详细执行过程进行分析! 9.ViewResult ViewResult将视图页的内容响应给客户端! 由于Vi ...

  9. Inside Flask - json 处理

    Inside Flask - json 处理 在处理 web api 时,json 是非常好用的数据交换格式,它结构简单,基本上各种主流的编程语言都有良好的支持工具. flask 中处理 json 时 ...

  10. Java多线程 LockSupport

    在AQS里面进行阻塞线程,解除阻塞线程就用的LockSupport. JDK1.8源码: package java.util.concurrent.locks; import sun.misc.Uns ...