建企业网站时离不开网页设计，而图片在网页设计中又是不可或缺的组成部分。在主流的网页排版中一般会使用CSS来控制页面中图片的显示，如平铺、覆盖、局部、重复等操作。如何通过CSS样式属性来控制背景图片的重复与否，其实在CSS属性中可以使用background-repeat来定义背景图片的重复属性。

CSS背景图片控制属性：
background-repeat:repeat-x|repeat-y|no-repeat

•repeat-x：图片在x轴方向上重复。
•repeat-y：图片在y轴方向上重复。
•no-repeat：不平铺，图片只显示一次。

//div背景图片不重复
<style>
.demo{
width:500px;height:600px;margin:0 auto;
background-image:url(
background-repeat:no-repeat; 
}
</style>
<div class="demo"></div>

如上，在类名为'demo'的盒子里添加一个名为'logo.png'的图片做为背景图，并通过background-repeat的不重复属性'no-repeat'设置背景图片不重复。

CSS中，背景样式主要包括背景颜色和背景图像。在传统的布局中，只能使用少数的标签来定义背景图像和背景颜色。但是随着Web2.0时代的到来，设置背景样式不再使用传统HTML属性来定义，转而使用无限制、更灵活的CSS来定义。

目标

• 设置背景颜色
• 设置背景图片
• 操作背景图片样式

背景颜色-background-color

在CSS中，使用background-color属性来定义元素的背景颜色。

语法：background-color:颜色值;

说明：颜色值是一个关键字或一个16进制的RGB值。

背景图像--background-image

在CSS中，使用background-image属性来定义元素的背景图片。

语法：background-image:url("图像地址");

说明：图像地址可以是相对地址，也可以是绝对地址。

注意：给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。如果设置的元素的宽高过小，背景图片就无法完整地显示出来了。

背景重复样式--background-repeat

在CSS中，使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。

语法：background-repeat:取值;

当值是repeat，全屏覆盖

当值是repeat-x，x轴方向覆盖

当值是repeat-y，y轴方向覆盖

当值是no-repeat，不复制

背景图片位置--background-position

在CSS中，使用background-position设置背景图像的位置

语法：background-positon:像素值/关键字;

说明：语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。

1. 像素值

要设置水平方向数值（x轴）和垂直方向数值（y轴），参数如下

假设设置一个距离左上角水平方向100px，垂直方向100px

效果如下

2. 关键字

当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。

假设我们要设置一个水平方向、垂直方向都居中的位置，就可以这样设置

这样他就永远都处于屏幕的正中间

背景固定样式--background-attachment

在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动

语法：background-attachment:scroll/fixed;

说明：background-attachment 属性只有2个属性值。scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。

总结

午制作网页时，写了一个利用 CSS3 实现网页背景颜色渐变的效果，晚上整理代理时，发现这效果还挺好玩的。记录下来，以后再写这种网页背景颜色渐变的效果时，只能复制就行了。

网页背景颜色的渐变，利用了 CSS3 中的 Gradients 属性，下面飞鸟慕鱼就来详细的说一说哦。

CSS3 的渐变效果有两种，分别为：Linear Gradients(线性渐变) 和 Radial Gradients(径向渐变)。

CSS3 linear-gradient定义和用法

Linear Gradients 定义：用线性渐变创建一个背景图像

语法：

background-image: linear-gradient(point,color1,color2,.....);

参数：

point：(可选)为渐变的坐标值，如省略则默认从上到下渐变，

color：为颜色值，可以写入多个，如：red，#fff

1、CSS3 背景颜色四个方向的线性渐变

/**默认向下渐变*/
background-image: linear-gradient( red , yellow);
/**向上渐变*/
background-image: linear-gradient(to top ,red , yellow);
/**向右渐变*/
background-image: linear-gradient(to right ,red , yellow);
/**向左渐变*/
background-image: linear-gradient(to left ,red , yellow);

运行结果：