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. Linux ACL管理详解

    转自: http://linuxguest.blog.51cto.com/195664/124107 1. 为什么要使用ACL先让我们来简单地复习一下Linux的file permission.在li ...

  2. python3中urllib2的问题

    import urllib from urllib import request a = urllib.request.Request(url) b = urllib.request.urlopen( ...

  3. JQ中的延迟对象deferred中的promise等的使用

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  4. Samba配置

    https://wiki.samba.org/index.php/Samba_AD_DC_Port_Usage 安装后开放端口 1    ACCEPT     tcp  --  0.0.0.0/0   ...

  5. Construct Binary Tree from Inorder and Postorder Traversal || LeetCode

    /** * Definition for a binary tree node. * struct TreeNode { * int val; * struct TreeNode *left; * s ...

  6. 一些小题<代码>

    1.用传统方法计算一个数的二进制 1.只能计算小于2**16的数字 i = 17 num_2 = int(input("输入一个数字:").strip()) while True: ...

  7. sdk 更新的时连接不上dl-ssl.google.com解决办法

    今天有朋友说sdk的更新不了,借了个VPN给他也没解决问题,后来还是他自己解决了,下面分享下经验 这里介绍一种不需要FQ的解决办法,修改C:\Windows\System32\drivers\etc下 ...

  8. SSD果然劲爆！

    前两周入手了一块浦科特128G盘,不说多了,有图为证 以前把机械盘放在主硬盘位的时候,鲁大师显示是SATA II接口,现在把SSD放在主硬盘位,显示居然是SATA III接口了,看上面测试,确实是II ...

  9. mongodb sharding配置

    mongodb集群配置 1 Mongo使用sharding集群 mongodb副本集群 mongos1 192.168.20.137 mongos2 192.168.20.138 mongo_conf ...

  10. sql 中实现往表中插入一条记录并返回当前记录的ID

    写一条存储过程,实现往User中插入一条记录并返回当前UserId(自增长id) --推荐写法 if(Exists(select * from sys.objects where name=N'Usp ...