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& ...
随机推荐
- Java爬虫，信息抓取的实现（转）
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23272657 今天公司有个需求,需要做一些指定网站查询后的数据的抓取,于是花了点 ...
- 多快好省的做个app开发
从技术经理的角度算一算,如何可以多快好省的做个app [导读]前端时间,一篇“从产品经理的角度算一算,做个app需要多少钱”的文章在网上疯传,可见大家对互联网创业的热情!这次,从一名技术经理的角度再给 ...
- java线程中的sleep和wait区别
面试题:java线程中sleep和wait的区别以及其资 ...
- Android 中字体的处理
//得到TextView控件对象 TextView textView = (TextView)findViewById(R.id.custom); //将字体文件保存在assets/fonts/文件夹 ...
- Cocos观察者设计模式和通报机制
观察员(Observer)模式也称为公告/订阅(Publish/Subscribe)模式.这是 MVC( 模型-视图-控制器)模型的重要组成部分.天气一直讨论的英国最喜欢的话题,近期天气变化几年已成为 ...
- HDU 1754 I Hate It （段树单点更新）
Problem Description 很多学校更受欢迎的习惯. 老师们真的很喜欢问.从XX XX到其中,的是多少. 这让非常多学生非常反感. 无论你喜不喜欢,如今须要你做的是,就是依照老师的要求.写 ...
- InstallShield安装包中集成第三方安装包的方案选择
原文:InstallShield安装包中集成第三方安装包的方案选择[转] 我们在制作安装包时,有些情况下会涉及第三方安装的集成,这里将讨论如何调用安装第三方包,以及需要注意的事项. 第三方安装包的 ...
- Eclipse 发布到网站的附加产品的形式 Update Site
Eclipse 发布到网站的附加产品的形式 Update Site 通过Update Site Project项目将自己做的插件产品公布到公网上,给客户或其它測试人员下载和应用,这样自己的插件就以网站 ...
- zoj 3537 Cake （凸包确定+间隔dp）
Cake Time Limit: 1 Second Memory Limit: 32768 KB You want to hold a party. Here's a polygon-sha ...
- thinkphp学习笔记2—入口文件
原文:thinkphp学习笔记2-入口文件 在thinkphp中有两个入口文件,一个是项目的入口文件,是index.php在主目录里面,还有一个是thinkphp框架的的入口文件,放在框架目录下面如: ...