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. Xcode离线安装帮助文档

    Xcode离线安装帮助文档   1.在线查看帮助文件:Xcode下查看帮助文件,菜单Help-Developer Documentation在右上角搜索框中即可检索,但速度很慢,在线查看. 2.下载帮 ...

  2. 使用TarOutputStream出现 request to write '1024' bytes exceeds size in header错误的解决方法

    因为测试流程中,所测客户端会根据服务器A返回的response决定发送给服务器B的请求里各参数的值,所以现在需要模拟服务器的响应.而这个项目服务器A的响应式返回一个流,一个GZIP压缩格式流,压缩的是 ...

  3. 获取唯一UUID/UDID方案

    概述 如何保证获取到的UUID能够唯一标识每一台设备呢?我们知道通过UIDevice可以获取到UUIDString,但是如果App被删除了然后重新安装,就会得到不同的UUIDString,这并不是我们 ...

  4. python学习之 字符串前'r'的用法

    在打开文件的时候open(r'c:\....') 加r和不加''r是有区别的 'r'是防止字符转义的 如果路径中出现'\t'的话 不加r的话\t就会被转义 而加了'r'之后'\t'就能保留原有的样子 ...

  5. T-sql创建表，插入数据

    SET NOCOUNT ON; USE hibernateSqlServer GO IF OBJECT_ID('Orders') IS NOT NULL DROP TABLE Orders; GO I ...

  6. Servlet 生命周期、工作原理

    按照单例的编码规则,Servlet本身只是一个Java,结构并不是单例结构. 只是Web容器在维护这些Servlet的时候只给创建一个实例存在JVM中,用户请求服务时,服务器只调用它已经实例化好的Se ...

  7. MVC控制器常用方法返回类型

    控制器的常用方法 using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...

  8. RDIFramework.NET 中多表关联查询分页实例

    RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...

  9. 关于thenao.scan() fn函数参数的说明

    theano.scan()原型: theano.scan( fn, sequences=None, outputs_info=None, non_sequences=None, n_steps=Non ...

  10. 安装eclipse的hadoop开发环境

    eclipse:安装路径/usr/local/eclipse hadoop-2.5.2 /usr/local/hadoop/hadoop-2.5.2 hadoop2x-eclipse-plugin-m ...