CSS背景样式设计简单介绍

1. 背景颜色

background-color属性设置了背景颜色，页面的背景颜色使用在body的选择器中，实例：

body{background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

• 十六进制 如："#ff0000"
• rgb 如：“rgb(255,0,0)”
• 颜色名称 如：“red”

2.背景图像

background-image描述了元素的背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，实例：

body {background-image:url(paper.gif);}

若是想水平或垂直平铺

如果图像只在水平方向平铺 (repeat -y),代码如下：

body{
	background-image:url(paper.gif);
	background-repeat:repeat -x;
}

如果图像只在垂直方向平铺 (repeat -y),代码如下：

body{
	background-image:url(paper.gif);
	background-repeat:repeat -x;
}

若不想平铺

body{
	background-image:url(paper.gif);
	background-repeat:no-repeat;
}

设置背景图片的位置

background-position可以设置图片在背景中的位置，实例：

body{
	background-image:url(paper.gif);
	background-repeat:no-repeat;
	background-position:right top;
}

第一个设置的是平行方向的位置，第二个设置的是处置方向的位置。
还可以使用类似于100px的值来设置水平和垂直方向的位置。

上面三个设置可以简写为一句话

background:url(paper.gif) no-repeat 100px 200px;

设置过渡颜色的背景（默认从上到下）

线性

background:linear-gradient(to right, red, yellow);

第一个位置设置的是方向，第二个设置的开始颜色，第三个位置设置的是结束颜色。
还可以通过角度来进行设置：
0 deg——从下到上的界面
90 deg ——从左到右的界面
180 deg——从上到下的界面
270 deg——从右到左的界面

background:linear-gradient(90 deg, red, yellow);

圆形过渡颜色

background: radial-gradient(red, orange, yellow, green,cyan, blue, purple)

默认是椭圆形的颜色渐变，下列代码为设置圆形渐变颜色的代码：

background: radial-gradient(circle, red, orange, yellow, green,cyan, blue, purple)