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& ...
随机推荐
- 真实故事：网站遭遇DOS攻击
网站遭遇DOS攻击 一个.事件背景 长假对于IT人员来说是个短暂的休整时期,可IT系统却一时也不能停.越是节假日,越可能出大问题,以下要讲述的就是一起遭受DOS攻击的案例. 春节长假刚过完,小李 ...
- linux软与硬接线连接
1.Linux链接概念 Linux链接分两种.一种被称为硬链接(Hard Link),还有一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接] 硬连接指通过索 ...
- leetcode先刷_Maximum Subarray
dp创始人级精英赛的冠军.最大的部分和. 扫从左至右,保持一个最佳值而当前部分和,在这一部分,并成为负值什么时候.再往下的积累后,也起到了负面作用,所以,放弃直销,然后部分和初始化为阅读的当前位置. ...
- HDU 1505 City Game（01矩阵 dp）
Problem Description Bob is a strategy game programming specialist. In his new city building game the ...
- Meteor全栈开发平台
Meteor全栈开发平台 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonno ...
- Sql Server存储过程和函数浅谈
今天给大家总结一下sql server中的存储过程和函数.本人是小白,里面内容比较初级,大神不喜勿喷 自行飘过就是.. 首先给大家简单列出sql server中的流控制语句,后面会用到的^_^ sql ...
- 在SurfaceView中自由书写和擦除
/////////继承SurfaceView 的类 public class PaintView extends SurfaceView implements Runnable,SurfaceHold ...
- Learning JavaScript(0)_Concepts
作用域,嵌套函数和闭包 <script type="text/javascript"> function foo(){ var a = 10; function bar ...
- [MFC]获取一些用户文件夹
(Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu 转载请注明出处) 在window7中.进入命令行cmd模式,输入set到多个系统文件夹定义: 比如: Wi ...
- 必要的软件架构师——编译原理·语法
最近软测试.我观看进程的视频! 发现里面有很多内容已经在自我不错的接触过程.而占80%比例! 但其中的一部分.我很奇怪的一部分.研究,在这里,将我研究的内容整理分享给大家! 编译原理: 首先,我第一眼 ...