HTML 学习笔记 CSS样式（背景）
背景色
可以使用background－color属性为元素设置背景色 这个属性接受任何合法的颜色值。
可以使用background-image属性来喂元素设置背景图片。
背景重复
如果需要在页面上对背景图进行平铺，可以使用background-repeat属性。
属性值repeat导致图像在水平垂直方向上都平铺，repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。。
默认的 背景图将从一个元素的左上角开始 。
背景定位。
可以利用background－position 属性来改变图像在背景中的位置。
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像防治关键字最容易理解，其作用如其名称所表明的 例如 top right 使图像防治在元素那边句区的右上角
根据规范 关键字可以以任何顺序出现 只要保证不超过两个关键字 一个对应水平方向 一个对应垂直方向。
如果只出现一个关键字 则认为另一个关键字是center
也可以使用百分数值来定义position
例如 background-position: 50%,50%;
这会导致图像适当放置 其中心与其元素的中心对齐 换句话说 百分数值同时应用于元素和图像。也就是说 图像中描述为50% 50%的点 与元素中描述为50% 50%的点（中心点）对齐
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
例子
1:设置背景颜色
Demo.css
body {
background-color: yellow;
}
h1 {
background-color: #00ff00;
}
h2 {
background-color: rgb(250,0,250);
}
p.no2{
background-color: gray; padding: 20px;
}
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<link rel="stylesheet" type="text/css" href="CSS/demo.css" />
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距</p>
</body>
</html>
2:设置背景图片
body {
/*background-color: yellow;*/
background-image: url(../img/HBuilder.png);
/*背景图不平铺*/
/*background-repeat:no-repeat ;*/
/*x方向平铺图片 repeat－y 垂直方向平铺背景图*/
background-repeat: repeat-x;
/*background-position:left top;*/
/*设置背景图的位置*/
background-position: 10px 10px;
/*背景图不随视图的滚动而滚动*/
background-attachment:fixed ;
}
background-repeat属性对应的值 和 他们的作用
background-attachment属性对应的值 和 他们的作用
HTML 学习笔记 CSS样式（背景）的更多相关文章
- 前端学习笔记--CSS样式--背景和超链接
1.背景 2.超链接: 举例:
- HTML 学习笔记 CSS样式（边框）
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- HTML 学习笔记 CSS样式（框模型）
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述
- HTML 学习笔记 CSS样式（文本）
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
- HTML 学习笔记 CSS样式（定位）
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- HTML 学习笔记 CSS样式（链接）
我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...
- HTML 学习笔记 CSS样式（字体）
css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...
- HTML 学习笔记 CSS样式（简介和语法）
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...
- 学习笔记 css样式
大小 width:宽度 height:高度 背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺 ...
随机推荐
- 虚拟机克隆以后出现“需要整合虚拟机磁盘”的解决方法
问题描述 在虚拟机克隆完毕以后,原始虚拟机提示"需要整合虚拟机磁盘" 在"任务与事件"栏中看到以下信息 解决方法 从上面可以看到是因为整合失败导致的,那么我们只 ...
- IOS圆头像
前言 随着腾讯QQ的普及,现在越来越多的社交类APP在显示好友头像时,都选择用圆形头像,效果如下(不包括黑底): 在ios开发中,大致有以下三种方案来实现圆形头像效果. 方案一:用Quartz2D绘制 ...
- [转]Android逆向之动态调试总结
一.在SO中关键函数上下断点 刚学逆向调试时.大多都满足于在SO中某关键函数上下断点.然后通过操作应用程序,去触发这个断点,然后进行调试 详细的步骤可以参见非虫大大的<Android软件安全与逆 ...
- android Activity runOnUiThread() 方法使用
在android 中我们一般用 Handler 做主线程 和 子线程 之间的通信 . 现在有了一种更为简洁的写法,就是 Activity 里面的 runOnUiThread( Runnable )方法 ...
- Android SQL语句实现数据库的增删改查
本文介绍android中的数据库的增删改查 复习sql语法: * 增 insert into info (name,phone) values ('wuyudong','111') * 删 delet ...
- 你真的了解UITextField吗？
一:首先查看一下关于UITextField的定义 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITextField : UIControl <UITextIn ...
- VisualSVN Server的配置和使用方法 图文
转载 http://www.jb51.net/article/17365.htm VisualSVN Server是免费的,而VisualSVN是收费的.VisualSVN是SVN的客户端,和Visu ...
- Android系统性能调优工具介绍
http://blog.csdn.net/innost/article/details/9008691 经作者授权,发表Tieto某青年牛的一篇<程序员>大作. Android系统性能调优 ...
- Linux PHP5.3升级PHP5.5.33 (CentOS)
由于要使用了laravel5.1,php要升级到5.5以上.具体环境是Aliyun Cent OS 7.0.由于阿里的yum源lastest只有5.4,laravel5.1必须php5.5,加了几个网 ...
- sql server使用中遇到的问题记录
一.sql server 不能连接远程服务器,但可以连接本地的数据库 我目前用的是sql server 2012 sp1,用着用着突然就不能连接远程服务器上的数据库了,崩溃了一天... 修复试了,卸载 ...