从屌丝到架构师的飞越（CSS篇）-CSS背景

一、介绍

CSS背景指的是可以设置网页背景单一颜色、网页背景为图片、网页背景图片居中于网页、网页背景图片网页固定位置、网页背景图片中网页中重复平铺等css背景样式，这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。

二、知识点介绍

1、CSS背景语法

2、CSS背景颜色

3、CSS背景图片

4、CSS重复背景图片

5、CSS背景图片的起始位置

6、CSS背景图片是否滚动

7、CSS背景图片样式整合

8、CSS背景扩展

三、上课对应视频的说明文档

1、CSS背景语法

background: background-color || background-image || background-repeat || background-attachment || background-position

2、CSS背景颜色

background-color:颜色对象背景颜色

案例一：

<html>

<head>

body {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

</head>

<body>

<p class="no2">这个段落设置了内边距。</p>

</body>

</html>

案例二：

<html>

<head>

span.highlight

{

background-color:yellow

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

3、CSS背景图片

background-image：url(图片地址) 设置背景图像

<html>

<head>

body {background-image:url(/i/eg_bg_04.gif);}

</style>

</head>

</html>

4、CSS重复背景图片

background-repeat ：值如何重复背景图片

<html>

<head>

body

{

background-image:

url(/i/eg_bg_03.gif);

background-repeat: repeat-y

}

</style>

</head>

<body>

</body>

</html>

5、CSS背景图片的起始位置

background-position ：值背景图像的起始位置

水平：left: 左 center: 中 right: 右

垂直：top: 上 center: 中 bottom: 下

垂直与水平的组合：x-% y-% x-pos y-pos

<html>

<head>

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

</style>

</head>

<body>

<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p>

</body>

</html>

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%.

<html>

<head>

body

{

background-image: url('/i/eg_bg_03.gif');

background-repeat: no-repeat;

background-attachment:fixed;

background-position: 30% 20%;

}

</style>

</head>

<body>

<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>

</body>

</html>

6、CSS背景图片是否滚动

background-attachment ：值设置背景图片是否固定或者随着页面的其余部分滚动

<html>

<head>

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

</style>

</head>

<body>

<p>图像不会随页面的其余部分滚动。</p>

</body>

</html>

7、CSS背景图片样式整合

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

<html>

<head>

body

{

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

}

</style>

</head>

<body>

<p>这是一些文本。</p>

</body>

</html>

8、CSS背景扩展

从屌丝到架构师的飞越（CSS篇）-CSS背景

推荐阅读更多精彩内容