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& ...
随机推荐
- oracle一视图性能问题
oracle一些性能视图的解释 --关于是否收集 timed_statistics参数:用于决定是否收集相关的时间参数,true为收集.如果该参数设为false,则等待事件相关视图也就无法收集到数据 ...
- 第三篇——第二部分——第二文 计划搭建SQL Server镜像
原文:第三篇--第二部分--第二文 计划搭建SQL Server镜像 本文紧跟上一章:SQL Server镜像简介 本文出处:http://blog.csdn.net/dba_huangzj/arti ...
- mysql_install_db出错，Unable to lock /usr/local/mysql/var/ibdata1, error: 11
今天,在一台旧机器上编译一个新的Mysql,install时出了错: /usr/local/mysql_5615/scripts/mysql_install_db --user=mysql --bas ...
- MyEclipse调整项目的顺序
MyEclipse该项目是按照字母顺序排列的项目名称,无法调整. 例,我现在做Photo工程项目,向下位置,非常不方便: 可是,它有一个将项目分组的功能"Working Sets" ...
- A*寻路算法lua实现
前言:并在相当长的时间没有写blog该,我觉得有点"颓废"该,最近认识到各种同行,也刚刚大学毕业,我认为他们是优秀的.认识到与自己的间隙,有点自愧不如.我没有写blog当然,部分原 ...
- passenger nginx
sudo dd if=/dev/zero of=/swap bs=1M count=1024 sudo mkswap /swap sudo swapon /swap Nginx with Passen ...
- bootstrap+jQuery.validate
bootstrap+jQuery.validate表单校验 谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.Us ...
- Gradle 2.0用户手册——总览（译）（转）
2.1 特性 本章将介绍一系列Gradle的特性. 申明式构建和基于约定的构建 Gradle的核心是基于Groovy呈现了一种丰富的针对特定领域的语言,称之为Domain Specific Langu ...
- Spring AOP入门——概念和注意事项
AOP什么? AOP在功能方面,它是之前和之后运行一些业务逻辑,一些操作(比方记录日志.或者是推断是否有权限等),这些操作的加入.全然不耦合于原来的业务逻辑.从而对原有业务逻辑全然是透明. 也就是说. ...
- SQLServer-----使用jTDS连接SQLServer数据库
一.jTDS一个简短的引论 jTDS100%纯Java实现的JDBC3.0驱动,它用于连接 Microsoft SQL Server(6.5.7.2000,2005,2008 和 2012)和Syba ...