CSS学习1

css背景：

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

p {background-color: gray; padding: 20px;}//padding 内边框属性

背景图像

要把图像放入背景，需要使用 background-image 属性。

设定情况	例子
background-image 属性的默认值是 none	表示背景上没有放置任何图像
body元素设定背景图像	body {background-image: url(/i/eg_bg_04.gif);}
段落设定背景	p.flower {background-image: url(/i/eg_bg_03.gif);}
行内元素设置背景	a.radio {background-image: url(/i/eg_bg_07.gif);}

背景定位

可以使用background-position 属性改变图像在背景中的位置.

body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}

• 关键字

单一关键字	等价关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

• 百分数值
  将图像在其元素中居中：

background-position: 50% 50%;

将一个图像放在水平2/3处，垂直1/3处：

background-position: 66% 33%;

• 长度值
  元素内边框距左上角的距离，如果要向水平偏移50xp，垂直偏移100xp，可以如下设定：

background-position:50px 100px;

背景关联

可以使用background-attachment属性来设定：

属性值	效果
scroll	默认值，背景会随文档滚动
fixed	声明背景相对于可视区是固定的

背景重复

可以使用background-repeat属性来设定背景平铺效果：

属性值	效果
repeat	图像在水平垂直方向上都平铺
repeat-x	图像只在水平方向上重复
repeat-y	图像只在垂直方向上重复
no-repeat	不允许图像在任何方向上平铺