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;

}

时间: 2024-10-03 14:00:40

CSS下背景属性background的使用方法的相关文章

CSS背景属性Background详解

本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. css2 中的背景(background) CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色. background-image: 引用图片作为背景. background-position: 指定元素背景图片的位置. background-repeat: 决定是否

CSS实现背景透明/半透明效果的方法

全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%} 其他的还有不少文章,有个不错,如何用CSS实现背景半透明效果? 内容详细如下:http://llf535.cn 龙行天下 精彩内容等着你 引用 如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一

CSS背景属性background

background属性是所有背景属性的缩写: 以下是这些背景属性: background-color:背景颜色 你可以通过颜色名称(red/green/blue)来设置 也可以用十六进制(#fff/#000/#bcbcbc) 还可以用到rgb(x,x,x)  x取值(0~255) background-position:背景开始位置 也是三种取值方式,第一种是用方位词(top/right/bottom/left)组合,如left top 百分比x%  x%,如0% 0%表示左上角 用像素表示,

解读CSS的背景(background)样式

background-color: 可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding). 注意:background-color 不能继承,其默认值是 transparent.transparent 有“透明”之意.也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见.事实上,所有背景属性都不能继承. background-image: background-image 属性的默认

css下position属性详解

写过CSS的人都免不了与position属性打交道,但是要真正理解position属性还不是一个很容易的事.前两天博主想在一个html页面上实现一个<div>元素重叠在另一个<div>元素上,并且位于该<div>元素的右下角的效果.在网上搜到他人的解决方法,并且也实现了,这里面最关键的就是利用position属性以及left.right.top.bottom等属性.为了更为透彻地理解背后原理,博主在网上搜了相关的资料,总算是有了一些认识,或许也只是一知半解,不过先写下来

使IE6下PNG背景透明的七种方法任你选

原文地址:http://blog.csdn.net/mosliang/article/details/6760028 相信如何解决png在ie6下透明的问题困扰了很多人.为了追求更好的页面效果,很多人喜欢使用png格式的图片,恰恰因为ie6下png图片的透 明问题,很多人不得不退而求其次地改用gif格式的图片.今天就来介绍一个ie6下png透明的解决办法,支持background(含 position.repeat.img src). 1. DD_belatedPNG简介: DD_belated

css基础语法二(常用文本与背景属性)

[CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,700表示bold ② font-style: 字体样式. italic-倾斜.normal-正常 ③ font-size: 字号. 可以写px单位,也可以写% 200%表示浏览器默认大小(16px)的两倍=32px ④ font-family: 字体系列(字体族). >>> 可以直接写字体名

CSS背景属性简单整理

CSS背景属性 background>>在一个声明中设置所有的背景属性 //一般按以下顺序书写 body{ background:red url('') no-repeat fixed center; } <!--通过设置背景颜色实现线性渐变效果,语法为:linear-gradient(角度,开始颜色,结束颜色)--> body{ background:linear-gradient(90deg,red,yellow); } background-attachment>>

浅谈在网页中你所不知道的css背景属性

在很多网页设计中,很多人对于css的背景属性,只是停留在设置背景.今天我们来谈谈它的其他应用. 比如背景的定位,它能实现很多翻转网页效果. background-position:指定背景图像的位置background-size 指定背景图片的大小background-image 指定要使用的一个或多个背景图像background-repeat 指定如何重背景图像background-origin 指定背景图像的定位区域background-clip 指定背景图像的绘画区域background-