希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
【技术等级】初级
【承接文章】《在CSS中使用background属性，调整页面和块背景，系统讲解背景属性》
本文承接上一篇文章中所讲到的background属性，通过几个简单实用的小例子，学些背景效果的各种实现方式。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
所承接的上一篇文章中，主要介绍了下列背景属性：
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
本文在上一篇文章的基础上，复习和巩固这五个属性的具体用法。
例1：为网页背景制作水印效果。
首先制作一张水印效果的图片。该图片的内容透明度较低，图片较小。本例中制作了一个宽度为290像素，高度为205像素的图片。该图片的文件名为back01.jpg。图片内容为两行文本，颜色为黑色，同时调整了两行文本的不透明度。图片效果如下所示，大家也可以根据自己喜好利用Photoshop随意制作。
例1素材图片 back01.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{background-image:url("back01.jpg");}
</style>
由于图片本身的尺寸远远小于整个页面的大小，所以在默认情况下，该图片会在页面中平铺以产生下列背景效果。
例1最终效果图
例2、为网页背景制作顶部花边效果。
首先制作一张花边图片。该图片包含一个花边图样，图片较小。本例中制作了一个宽度为172像素，高度为36像素的图片。该图片的文件名为back02.jpg。图片效果为：
例2 素材图 back02.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{
background-image:url("back02.jpg");
background-repeat:repeat-x;
}
</style>
由于图片本身的尺寸远远小于整个页面的大小，同时又设置为水平方向平铺，所以该图片会在页面中产生下列背景效果。
例2最终效果图
例3、为网页背景制作渐变背景。
首先制作一张渐变图片。该图片包含自上而下的蓝白渐变。本例中制作了一个宽度为1像素，高度为200像素的图片。该图片的文件名为back03.jpg。图片效果为：
例3 素材图片 back03.jpg
为页面添加如下代码在<head></head>标记对中：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
}
</style>
由于图片的宽度远远小于整个页面的宽度，同时又设置了水平方向平铺，所以该图片该图片会在页面中产生下列背景效果。
同时，由于页面本身的颜色默认为白色，因此，该渐变色下方的白色与页面背景颜色融合。因此，当页面过长产生垂直滚动条后，不会影响背景颜色的自然过渡。
那么，若需要给页面背景添加自上而下的白蓝渐变，应该如何设置呢？渐变色下方的蓝色与页面背景无法融合，会产生明显的蓝白边界。该问题的解决方法是将页面的背景颜色由默认的白色调整为渐变色下方的颜色即可。代码如下：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
background-color:# 8181fc; //渐变色下方的蓝色
}
</style>
例4：设置网页的背景图片位于页面中心，且不随垂直滚动条的滚动而滚动。
首先制作一张可以居中放置的图片。本例中制作了一个宽度为500像素，高度为500像素的图片。该图片的文件名为back04.jpg。图片效果为：
例4 素材图片 back04.jpg
实现该效果的代码如下所示。
<style type="text/css">
body{
background-image:url("back04.jpg"); //加载图片
background-repeat:no-repeat; //设置不平铺
background-position:center center; //位置在页面中心
background-attachment:fixed; //页面滚动时图片固定
}
</style>
文章预告
下一篇文章中，小海老师会带领大家学习CSS中功能强大的图片精灵技术（CSS Sprite）。对于渴望在前端开发道路上前进的你一定不能错过！
小海教材
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
小海声明
在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。