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 ...
随机推荐
- Java项目中的classpath
一. 首先 classpath 是指 :项目路径\target\classes目录: 二.解释classes含义: 1.存放各种资源配置文件 2.存放模板文件 3.存放class文件, 对应的是项目开 ...
- 10/12 study
[患者版]加号选择页: 这是四个TableView放在Scrollview上 上面是个xib封装的view 整体就是个scrollView,用xib摆上去的控件: 上面加了黄条,旧的控件统一修改y ...
- 【Composer】实战操作一：使用库
前言 前面我们简单介绍了composer的安装 以及 如何安装库 本文目的 主要实战讲解如何使用库,主要是PSR-0 和 PSR-4的区别,以及如何在代码中引用.关于PSR-0和PSR-4的具体区别可 ...
- 对蓝牙profile的理解
蓝牙profile协议概览.pdf 之所以把Profile翻译为配置文件,是为避免和JavaME中的简表混淆.配置文件也是蓝牙 SIG官方网站给出的标准翻译. 想要使用蓝牙无线技术,设备必须能够翻译特 ...
- lag 和 lead
TableA如下: TableA id name 1000 A 1001 B 1002 C 1003 D 1004 E 说明: lag 和lead 有三个参数,第一个参数是列名,第二个参数是偏移的of ...
- 简单实用的双向电平转换电路（3.3v-5v）
当你使用3.3V的单片机的时候,电平转换就在所难免了,经常会遇到3.3转5V或者5V转3.3V的情况,这里介绍一个简单的电路,他可以实现两个电平的相互转换(注意是相互哦,双向的,不是单向的!).电路十 ...
- 下拉列表select显示ng-options
js中如何处理: it-equipment-list-maintenance-create-controller.js 'use strict'; myApp.controller( 'itEquip ...
- 记录一次项目中使用memcatch添加端口以及自动运行
具体原因:多个项目同时使用一个memcatch服务情况需要分别为项目添加端口,如果只有一个项目使用则不需要去修改端口(memcatch有默认端口),当然已可以去修改默认端口. 下面我记录下我自己的使用 ...
- CentOS7安装配置SAMBA服务器
假设我们有这样一个场景 共享名 路径 权限 SHAREDOC /smb/docs 所有人员包括来宾均可以访问 RDDOCS /smb/tech 仅允许特定组的用户进行读写访问 特定组的组名为RD,目前 ...
- mongoose升级后遇到的问题
由于想在mongoose中使用Q,所以将mongoose升级到了4.1.0,而线上mongoDB的版本是2.6.7,升级的时候,node-modules存在mongoose的残渣,所以调用 npm i ...