CSS背景样式
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背景样式的更多相关文章
- 认识CSS中css背景样式设置
前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...
- HTML学习笔记 CSS背景样式案例 第六节 （原创） 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS背景样式和列表样式
background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...
- css背景样式background
background用来定义html元素的背景效果 background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法 1.十六进制方式,如"#ff0000" 2 ...
- CSS设置边框、符号、背景样式、链接属性
一.CSS边框空白 padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白* ...
- CSS中如何使用背景样式属性，看这篇文章就够用了
css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...
- css 字体样式设置大全
css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- CSS基本样式-背景属性
代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...
随机推荐
- ss与udp转发的释疑
转载: http://shadowsocks.info/shadowsocks-udp/ VPS购买地址 udp是什么:UDP 是User Datagram Protocol的简称, 中文名是用户数据 ...
- loadrunner获取返回值为乱码
找了很多方法,utf-8也设置了,还是不行,只有有转码方法了 web_reg_save_param("res2", "LB=\"msg\":\&quo ...
- Java-马士兵设计模式学习笔记-代理模式-聚合与继承方式比较
一.概述 1.目标:要在Tank的move()方法做时间代理及日志代理(可以设想以后还要增加很多代理处理),且代理间的顺序可活更换 2.思路: (1)聚合:代理类聚合了被代理类,且代理类及被代理类都实 ...
- 为什么要 MySQL 迁移到 Maria DB
在Oracle收购了SUN公司之后, MySQL很不幸的落在了Oracle的手中,MySQL与Oracle DB存在竞争关系,很可能导致Oracle公司影响MySQL的开发与开放.MySQL之父Wid ...
- Extjs 表格横坐标显示问题
在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的a ...
- Java反射的三种实现方式
Foo foo = new Foo(); 第一种:通过Object类的getClass方法 Class cla = foo.getClass(); 第二种:通过对象实例方法获取对象 Class cla ...
- Long型转化成BigDecimal
Long转成带小数的,最好使用BigDecimal,而不是double. 以下例子,是将long型转化成BigDecimal,这样容易保持精度. public class Test { public ...
- php 正则提取数字
<?php//$patterns = "/^(http|https):\/\/(.)*\.(.)*$/";$patterns = "/\d+/";$str ...
- pthread_attr_setdetachstate
pthread_create函数可以指定新创建线程的属性. pthread_attr_setdetachstate() set detach state attribute in thread at ...
- RDIFramework.NET ━ 9.5 组织机构管理 ━ Web部分
RDIFramework.NET ━ .NET快速信息化系统开发框架 9.5 组织机构管理 -Web部分 组织机构管理模块提供直观方便的组织机构管理,以树型结构显示单位和部门的机构体系,可根据需要进行 ...