CSS下背景属性background的使用方法
背景颜色（background-color）
CSS可以用纯色来作为背景，也可以将背景设置为透明,background相当于xhtml中的bgcolor。
它的两个值：
- transparent（默认值，透明）
- color(指定的颜色，和文本颜色的设置方法相同)
示例：
body {background-color: black;}
h1 {background-color: #00ff00;}
h2 {background-color: transparent;}
p {background-color: rgb(0,0,255);}
背景图片（background-image）
用一张图片作为标签的背景可用到这个属性，如果背景颜色和背景图片都被定义了，背景图片会覆盖在背景颜色之上。
示例：
body {background-image:url(../images/background.jpg);}
或
<body style="background-image:url(../images/background.jpg);">
背景重复属性（background-repeat）
这个属性必须跟在background-image属性后使用，它决定图片背景的重复方法。如果使用了background-image后没有添加这个属性，默认情况它是横向纵向都重复的，它有四个属性值：
- repeat（默认值，重复，横向和纵向。）
- no-repeat（不重复）
- repeat-x（背景图片横向重复）
- repeat-y（背景图片纵向重复）
示例：
body {
background-image:url(../images/background.jpg);
background-repeat:repeat-y; /*垂直重复*/
}
背景位置属性(background-position)
这个属性也是跟在background-image属性后使用的，它决定背景图片的初始位置，它通常是以x与y坐标定位的，所以通常都取两个值，默认值是0% 0%。
它按照水平、垂直方式，部署了8个属性值：
- 水平：left、center、right；
- 垂直：top、center、bottom；
- 垂直与水平综合：x-% y-%、x-pos y-pos。
前6个属性值都很简单，最后两个属性值乍一看会有些摸不到头脑。x-% y-%的意思是x轴的百分数和y轴的百分数，x-pos y-pos的意思是x轴的值和y轴的取值。
示例：
p {
background-image:url(../images/background.jpg);
background-position:20px -30px;
background-repeat:no-repeat;
}
div {
background-image:url(../images/background.jpg);
background-position:50% 20%;
background-repeat:no-repeat;
}
背景附着属性(background-attachment)
这个属性依然要跟随background-image后面使用，它决定背景图片是跟随内容滚动，还是固定不动，它有两个属性值：
- scroll（默认值，背景图片跟随内容滚动。）
- fixed（背景图片固定，不跟随内容滚动。）
示例：
.para6 {
background-image:url(../images/background.jpg);
background-position:50% 20% ;
background-repeat:no-repeat;
background-attachment:fixed;
}
背景属性(background)
和前几篇文章中提到的font属性使用方法一样，background也是综合缩写，书写顺序：
background:background-color background-image background-repeat background-attachment background-position;
示例：
.para7 {
background:#000000 url(../images/background.jpg);
}
.para8 {
background:url(../images/background.jpg) repeat fixed left top;
}
CSS下背景属性background的使用方法的更多相关文章
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- CSS代码示例-背景属性(background)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS的背景属性和边框属性
CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...
- CSS背景属性background
background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/ ...
- 解读CSS的背景（background）样式
background-color: 可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding). 注意:background- ...
- CSS实现背景透明/半透明效果的方法
全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...
- CSS的 背景属性
㈠背景色 background-color ⑴background-color 属性设置元素的背景颜色. ⑵元素背景的范围: background-color 属性为元素设置一种纯色.这种颜色会填充 ...
- css下背景渐变与底部固定的蓝天白云
<?php defined('_JEXEC') or die; JHtml::_('behavior.framework', true); //if(!$templateparams->g ...
- css的背景图片background
1.使用背景图片的标签定设置宽高,没有设置的话,也需要用内容来撑开标签. 2.如果对同一个标签分开设置背景图片和颜色,背景颜色一定要写在背景图片后面,不然会被覆盖 <!DOCTYPE html& ...
随机推荐
- 最大流量dinci模板
我们知道.增广路径EK时间是在充电算法的O(n*m^2).找到最短增广路径的时间复杂度为O(m*n^2).这样的时间复杂度主要是寻找扩充道路. 这里也有一个演示Dinci算法,使用BFS层次结构图,然 ...
- 开源GUI-Microwindows之程序入口分析
**************************************************************************************************** ...
- iOS一个开发系列中 - UIButton 使用摘要
// 初始化button并设置类型 UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; // 可以定义的UIButto ...
- Async和Await进行异步编程
使用Async和Await进行异步编程(C#版 适用于VS2015) 你可以使用异步编程来避免你的应用程序的性能瓶颈并且加强总体的响应.然而,用传统的技术来写异步应用是复杂的,同时编写,调试和维护都很 ...
- iOS UISearchDisplayController学习笔记
UISearchDisplayController和UISearchBar一起使用用来管理UISearchBar和搜索结果的展示.UISearchDisplayController提供了显示搜索结果的 ...
- HDOJ 4248 A Famous Stone Collector DP
DP: dp[i][j]前i堆放j序列长度有多少行法, dp[i][j]=dp[i-1][j] (不用第i堆), dp[i][j]+=dp[i-1][j-k]*C[j][k] (用第i堆的k个石头) ...
- iis7、iis8配置备份还原
原文 iis7.iis8配置备份还原 方法1: 1.打开我们的IIS管理器,在功能视图里找到“共享的配置”这个功能然后双击进入. 2.进入“共享的配置”后单机右上方的“导出配置”选项,选择导出配置文件 ...
- C#中假设正确使用线程Task类和Thread类
C#中使用线程Task类和Thread类小结 刚接触C#3个月左右.原先一直使用C++开发.由于公司的须要,所地採用C#开发.主要是控制设备的实时性操作,此为背景. 对于C#中的Task和Thread ...
- react.js 从零开始（六）Reconciliation
Reconciliation React 的关键设计目标是使 API 看起来就像每一次有数据更新的时候,整个应用重新渲染了一样.这就极大地简化了应用的编写,但是同时使 React 易于驾驭,也是一 ...
- http://blog.jobbole.com/50603/#comment-153933
http://blog.jobbole.com/50603/#comment-153933