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

时间 2019-11-17

标签开始 web css3 css 渐变 background 属性栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......css

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

微信公众号：Web前端之巅

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

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

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

1、渐变

渐变是CSS3当中比较丰富多彩的一个特性，经过渐变咱们能够实现许多炫丽的效果，有效的减小图片的使用数量，而且具备很强的适应性和可扩展性。可分为线性渐变、径向渐变。前端

一、线性渐变

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

语法：程序员

background: linear-gradient(direction, color1, color2 [stop], color3...);

参数说明：github

direction：表示线性渐变的方向，
- to left：设置渐变为从右到左。至关于: 270deg;
- to right：设置渐变从左到右。至关于: 90deg;
- to top：设置渐变从下到上。至关于: 0deg;
- to bottom：设置渐变从上到下。至关于: 180deg。这是默认值。
color1：起点颜色。
color2：过渡颜色，指定过渡颜色的位置 stop.
color3：结束颜色。你还能够在后面添加更多的过渡颜色和位置，表示多种颜色的渐变。

示例：浏览器

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);

二、径向渐变

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

语法：ide

background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color);

参数说明：性能

shape：渐变的形状。
- ellipse表示椭圆形，
- circle表示圆形。默认为ellipse，
若是元素宽高相同为正方形，则ellipse和circle显示同样；

若是元素宽高不相同，默认效果为 ellipse。
size：渐变的大小，即渐变到哪里中止，它有四个值。
- closest-side：最近边；
- farthest-side：最远边；
- closest-corner：最近角；
- farthest-corner：最远角。默认是最远角。
at position：渐变的中心位置。好比：
- at top left: 中心为元素左上角位置
- at center center：中心为元素中心位置
- at 5px 10px: 中心为偏移元素左上角位置右边5px，下边10px位置。
start-color ：起始颜色
color ：渐变颜色，可选起始位置 stop。
last-color: 结束颜色。

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

示例：

background: radial-gradient(circle farthest-side at right top, red, yellow 50%, blue);

三、重复渐变

语法：

repeating-linear-gradient /*线性重复渐变*/
repeating-radial-gradient /*径向重复渐变*/

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

示例：

<style>
        div:first-of-type {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* border: 1px solid blue; */

            background: repeating-radial-gradient(circle closest-side at center center, 
                        blue 0%, yellow 10%, blue 20%,
                        red 20%, yellow 30%, red 40%);
        }

        div:last-of-type {
            width: 800px;
            height: 10px;
            margin: 100px auto;
            /* border: 1px solid blue; */

            background: repeating-linear-gradient(45deg,
                        yellow 0%, blue 5%, red 10%,
                        red 10%, blue 15%, yellow 20%);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

2、background 属性

一、复习background属性

/*添加背景颜色*/
background-color: #fff;

/*添加背景图片*/
background-image: url("./images/img.jpg");

/*设置背景平铺*/
background-repeat：repeat(默认) | no-repeat | repeat-x | repeat-y | round | space
/*新增两个值：
    round:会将图片进行缩放以后再平铺。保证图片完整紧凑排列。
    space:图片不会缩放平铺，只是会在图片之间产生相同的间距值。
*/

/*背景定位*/
background-position：left | right | center（默认） | top | bottom 

/*背景是否滚动*/
background-attachment:scroll（默认） | fixed 
/* 说明：
    scroll: 背景图的位置是基于盒子（假如是div）的范围进行显示；
    fixed：背景图的位置是基于整个浏览器body的范围进行显示，若是背景图定义在div里面，而显示的位置在浏览器范围内可是不在div的范围内的话，背景图没法显示。
*/

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

local:背景图片会跟随内容一块儿滚动；

scroll:背景图片不会跟随内容一块儿滚动。

二、新增的background属性

2.一、background-size

CSS里的 background-size 属性可以让程序员决定如何在指定的元素里展现，它经过各类不一样是属性值改变背景尺寸呈现的大小。每每建议不要将图放大，若是有须要，尽可能让图缩小，以保证图片的精度。

/*设置背景图片的大小：宽度/高度   宽度/auto(保持比例自动缩放)*/
background-size: 100px 50px;
background-size: 100px;

/*设置百分比，是参照父容器可放置内容区域的百分比*/
background-size: 50% 50%;

/*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片所有包含在容器内
1.图片大于容器：有可能形成容器的空白区域,将图片缩小
2.图片小于容器：有可能形成容器的空白区域，将图片放大*/
*background-size: contain;

/*cover:与contain恰好相反，背景图片会按比例缩放自适应填充整个背景区域，若是背景区域不足以包含全部背景图片，图片内容会溢出
1.图片大于容器：等比例缩小，会填满整个背景区域，有可能形成图片的某些区域不可见
2.图片小于容器：等比例放大，填满整个背景区域，图片有可能形成某个方向上内容的溢出*/
background-size: cover;

2.二、background-origin

做用：提高用户的响应区域。

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

background-origin：能够调节定位原点的位置。

语法：

background-origin: padding-box|border-box|content-box;

border-box：从border的左上角位置开始填充背景，会与border重叠；
padding-box：从padding的左上角位置开始填充背景，会与padding重叠；
content-box：从内容左上角的位置开始填充背景。

当设置 background-origin：content-box; 时，能够将要显示的图片放在盒子中间，若是这时图片是个精灵图的话，旁边会有其余的图干扰，怎么办呢，能不能只显示我须要的精灵图？看下面的 background-clip.

2.三、background-clip

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

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

语法：

background-clip: border-box|padding-box|content-box;

border-box：只显示border及之内的内容
padding-box：只显示padding及之内的内容
content-box：只显示content及之内的内容

因此，回到 2.2 节最后的问题，这时咱们再设置 background-clip:content-box; 就能够屏蔽其余不要的精灵图了。

那么为何要这么作呢？干吗把 a 标签作的这么大，跟须要的精灵图同样大很差吗？

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

我这样作的目的就是提高用户点击的范围，可是显示的内容仍是之前的，这样能够提升用户的使用体验啊。

2.四、案例：精灵图的使用

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*提高移动端响应区域的大小*/
        a {
            display: block;
            width: 50px;
            height: 50px;   
            background: url("./images/sprites.png") -22px 0;
            background-repeat: no-repeat;
            padding: 15px;
            box-sizing: border-box;
            background-origin: content-box;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

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