从零开始学 Web之CSS3（三）渐变，background属性

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、渐变

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变。

1、线性渐变

线性渐变：指沿着某条直线朝一个方向产生渐变效果。

语法：

参数说明：

：表示线性渐变的方向，

：设置渐变为从右到左。相当于: 270deg;

：设置渐变从左到右。相当于: 90deg;

：设置渐变从下到上。相当于: 0deg;

：设置渐变从上到下。相当于: 180deg。这是默认值。

：起点颜色。

：过渡颜色，指定过渡颜色的位置 stop.

：结束颜色。你还可以在后面添加更多的过渡颜色和位置，表示多种颜色的渐变。

示例：

2、径向渐变

径向渐变：指从一个中心点开始沿着四周产生渐变效果。

语法：

参数说明：

：渐变的形状。

表示椭圆形，

表示圆形。默认为ellipse，

如果元素宽高相同为正方形，则ellipse和circle显示一样；

如果元素宽高不相同，默认效果为 ellipse。

size：渐变的大小，即渐变到哪里停止，它有四个值。

：最近边；

：最远边；

：最近角；

：最远角。默认是最远角。

：渐变的中心位置。比如：

: 中心为元素左上角位置

：中心为元素中心位置

: 中心为偏移元素左上角位置右边5px， 下边10px位置。

：起始颜色

：渐变颜色，可选起始位置 stop。

: 结束颜色。

注意：各个参数之间用空格隔开，而不是逗号隔开。

示例：

3、重复渐变

语法：

重复的话，就需要有一个重合的百分百作为分界线。然后自动按照比例重复渐变。

示例：

二、background 属性

1、复习background属性

local与scroll的区别：当滚动的是当前盒子（div）里面的内容的时候，

:背景图片会跟随内容一起滚动；

:背景图片不会跟随内容一起滚动。

2、新增的background属性

2.1、background-size

CSS里的 属性能够让程序员决定如何在指定的元素里展示，它通过各种不同是属性值改变背景尺寸呈现的大小。往往建议不要将图放大，如果有需要，尽量让图缩小，以保证图片的精度。

2.2、background-origin

作用：提升用户的响应区域。

我们在 background-position 定位的时候，都是默认定位原点在元素的左上角来定位的。可不可以调节定位的位置呢？

：可以调节定位原点的位置。

语法：

：从border的左上角位置开始填充背景，会与border重叠；

：从padding的左上角位置开始填充背景，会与padding重叠；

：从内容左上角的位置开始填充背景。

当设置 时，可以将要显示的图片放在盒子中间，如果这时图片是个精灵图的话，旁边会有其他的图干扰，怎么办呢，能不能只显示我需要的精灵图？看下面的 background-clip.

2.3、background-clip

：属性规定背景的绘制区域.

虽然是设置裁切，但是控制的是显示。说白了，就是设置最终显示那些区域。

语法：

：只显示border及以内的内容

：只显示padding及以内的内容

：只显示content及以内的内容

所以，回到 2.2 节最后的问题，这时我们再设置 就可以屏蔽其他不要的精灵图了。

那么为什么要这么做呢？干嘛把 a 标签做的这么大，跟需要的精灵图一样大不好吗？

还记得手机通讯录右侧的A-Z的列表吗？容易点吗？是不是很容易点错？

我这样做的目的就是提升用户点击的范围，但是显示的内容还是以前的，这样可以提高用户的使用体验啊。

2.4、案例：精灵图的使用

需求：为一个块元素设置精灵图背景，精灵图很小，但是需要更大的展示区域，能够以更大的范围响应用户的需要，但是只需要显示指定的背景图片。

由图可见，返回箭头下 a 的范围变大了，那么用户点击的响应区域也就大了。

欢迎关注

Web前端之巅

念念不忘，必有回响。