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. Hibernate配置Log4J，很有参考价值的

    hibernate3 自带的默认的日志框架是slf4j,hibernate3的slf只是一个日志的接口,而hibernate3 自带默认的日志框架,在实际开发中很少有公司或者是项目中用到,这里记录一种 ...

  2. 服务器（Liunx）打包发布java web工程

    Liunx服务器上打包发布web工程(开发工具Idea) 1.首先使用Idea自带的打包功能(点击package打包) 2.然后链接到服务器(我这里用的是Xshell链接工具) 3.将打好的war包传 ...

  3. Memcached 笔记与总结（9）Memcached 与 Session

    一.Memcached 存储 Session 由于 Memcached 是分布式的内存对象缓存系统,因此可以用来实现 Session 同步:把 Web 服务器中的内存组合起来,成为一个“内存池”,不管 ...

  4. ssm maven项目启动 报SYSTEM_PROPERTIES_MODE_ENVIRONMENT

    1.jar包冲突,查看项目中的jar和pom.xml中配置的jar包 版本,把没用的jar包删掉

  5. Python之调用函数

    Python之调用函数 Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数 abs,它接收一个参数. 可以直接从Python的官方网站查 ...

  6. mac显示所有文件、不产生.DS_Store文件

    1.mac的Finder显示所有文件: defaults write com.apple.finder AppleShowAllFiles -bool true killall Finder 2.ma ...

  7. zepto源码--核心方法5（文本操作）--学习笔记

    涉及到文本内容的主要有三个函数:html, text, val. 我们已经见过多次,一个函数多种用途的情况,今天这三个函数也不例外,既可以获取内容,也可以设置内容.判断条件就是有没有传入参数,如果没有 ...

  8. Rectangle Area || LeetCode

    把交叉点的坐标求出来即可. #define max(a,b) ( (a)>(b)?(a):(b) ) #define min(a,b) ( (a)<(b)?(a):(b) ) int co ...

  9. Android中Animation 详细解读

    Animation从总体来说可以分为两类: 1.Tweened Animations:该类提供了旋转,移动,伸展,淡入淡出等效果 Tweened Animations也有四种类型: 1.     Al ...

  10. IE8下JQuery clone 出的select元素使用append添加option异常解决记录

    遇到一个怪现象,由于配置参数是多实例的, 故采用JQuery对模板HTML代码进行clone, HTML代码中包括select标签, 在克隆之后需要对select进行添加option. 在firefo ...