分享
 
 
 

CSS手册简编:颜色背景属性

王朝html/css/js·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

CSS属性:

4、颜色和背景(Color and Background)属性:

这里介绍有关CSS中前景色和背景颜色、图片的设定方法。

color属性:

color属性用于设定元素的前景色:

属性名称: 'color'

属性值: <color>

初始值: 根据用户的初始值而定

适合对象: 所有元素

是否继承: yes

百分比备注: 被禁止

color属性的值可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如:

EM { color: red }

EM { color: rgb(255,0,0) }

背景属性:

background-color属性用于设定背景色,初始值为透明:

属性名称: 'background-color'

属性值: <color> | transparent

初始值: transparent

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

backgroud-image属性用于设定背景的图片:

属性名称: 'background-image'

属性值: <url> | none

初始值: none

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

其中url可以为绝对地址,也可以是相对地址,例如:

BODY { background-image: url(marble.gif) }

P { background-image: none }

以上两个属性利用普通的HTML属性也可以实现,下面的属性是CSS对原有HTML的扩展。

background-repeat属性用来描述背景图片的重复排列方式:

属性名称: 'background-repeat'

属性值: repeat | repeat-x | repeat-y | no-repeat

初始值: repeat

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

其中属性值的含义为:

repeat:沿X轴和Y轴两个方向重复显示图片。

repeat-x:沿X轴方向重复图片。

repeat-y:沿Y轴方向重复图片。

none:不重复图片。

例如:

BODY {

background: red url(pendant.gif);

background-repeat: repeat-y;

}

/*表示沿Y轴重复图片"pendant.gif",其余部分以红色为背景色*/

background-attachment属性表示在滚动整个文档时,背景图片的显示方式。它的属性值有两种:fixed和scroll,fixed相当于IE4里的水印效果,也就是说在拖动文档时,背景相对是静止的,scroll则和文档一起滚动。

background-position属性用来指定背景图片显示的位置:

属性名称: 'background-position'

属性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]

初始值: 0% 0%

适合对象: 容器元素

是否继承: no

百分比备注: refer to the size of the element itself

其中属性值含义为:

"top left"和"left top"表示"0% 0%"。

"top"、"top center"和"center top"表示"50% 0%"。

"right top"和"top right"都表示"100% 0%"。

"left"、"left center"和"center left"表示"0% 50%"。

"center"和"center center"表示"50% 50%"。

"right"、"right center"和"center right"都表示"100% 50%"。

"bottom left"和"left bottom"表示"0% 100%"。

"bottom"、"bottom center"和"center bottom"都表示"50% 100%"

"bottom right"和"right bottom"表示"100% 100%"。

例如:

BODY { background: url(banner.jpeg) right top } /* 100% 0% */

BODY { background: url(banner.jpeg) top center } /* 50% 0% */

BODY { background: url(banner.jpeg) center } /* 50% 50% */

BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

background属性是以上背景属性的快捷方式,属性和顺序如下:

属性名称: 'background'

属性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>

适合对象: 所有元素

是否继承: no

百分比备注: 只在background-position中容许使用

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有