需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：div{background-color: #0b93d5}。
3、浏览器运行index.html页面，此时成功实现了只在文字的后面又蓝色背景色。
CSS不可以同时定义两个背景，不过你可以嵌套一下，比如：在div里面嵌套一个span，然后可以分别设置背景，以达到自己想要的效果。做渐变的背景，要突破浏览器的限制，建议用图片做，先在PS 里面根据需要（纵向或横向）制作一张渐变的图片，然后，裁切成1px高或宽的条。
然后在设置背景的时候， 横向（repeat-x）或纵向平铺（repeat-y）就可以了。
如果是纵向渐变，就做竖条，横向平铺。横向渐变，就是做横条，纵向平铺就可以了。 就这么简单。
利用css3可实现背景颜色渐变：
一、线性渐变：
1、线性渐变在 Mozilla 下的应用
语法：
-moz-linear-gradient( [<point>|| <angle>,]? <stop>, <stop>[, <stop>]* )
2、线性渐变在 Webkit 下的应用
语法：
-webkit-linear-gradient( [<point>|| <angle>,]? <stop>, <stop>[, <stop>]* )//最新发布书写语法
3、线性渐变在 Opera 下的应用
语法：
-o-linear-gradient([<point>|| <angle>,]? <stop>, <stop>[, <stop>]) /* Opera 11.10+ */
二 径向渐变
语法：
-moz-radial-gradient([<bg-position>|| <angle>,]? [<shape>|| <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)
-webkit-radial-gradient([<bg-position>|| <angle>,]? [<shape>|| <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)
