编程大白话之-background(叁)

在前两篇中已经对background的基本属性进行了了解，今天就来和大家分享一些我遇到background的某些特殊表现方法和不常用到的一些属性。

- 例如我想给一个元素添加背景图，可是一个图片的内容又满足不了的时候，该怎么办呢？看下面的简图

Han.PNG

上面是我喜欢的游戏人物，为了让他们一起出现在一个背景图片中，那么background-image属性就进行了提升。看代码：

.div {
            width: 900px;
            height: 600px;
            border: 1px solid #333;
            background-image: url(./img/bg-1.jpg), url(./img/bg-2.jpg), url(./img/bg-3.jpg);
            background-repeat: no-repeat;
            background-position: left top, right top, left bottom;
        }

看代码就会发现使用的还是原有的属性，只是对其进行了一些相互之间的配合：

1. background-image 可以同时导入多张图片，中间要以逗号隔开。
2. background-repea 让所有的图片都不重复。
3. background-position 分别给每一张图片的位置进行了定位。

- 如果你对background的属性都以掌握，那么就可以使用简写的方法

下面两个代码表现的都是一样的效果，但代码量会减少很多。

.div {
            width: 500px;
            height: 350px;
            background-color: #00FF00;
            background-image: url(./img/car0.png);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

.div {
            width: 500px;
            height: 350px;
            background: #00FF00 url(./img/car0.png) no-repeat fixed;
        }

Han.PNG

今天要说的重点是下面的linear-gradient()属性：线性渐变
我们平时很少会自己去制作背景图，但css3新增的一个属性，我们可以用来娱乐一下(虽然很无聊=.=！但不要说出来)

• 第一个参数: 可不写, 默认值为 to bottom (即180%), 用来指定渐变的方向, 可是是具体的角度值, 也可以直接指定方位 to left/ to right/ to top/ to bottom。
• 为实现渐变, 还需要至少定义两个颜色结点, 每个颜色节点可由两个参数组成, [颜色值 位置值, 颜色值 位置值, ...], 其中颜色值为必填项, 位置值可为长度, 或百分比, 非必填项。
  例如：

.div {
            width: 500px;
            height: 350px;
            background: linear-gradient(red 30%, blue 80%);
        }

linear-gradient(red 30%, blue 80%); 表示: 容器顶部30%的区域被填充为红色实色, 容器中间50%的高度区域被填充为从红色到蓝色的渐变色, 容器底部20%区域被填充为蓝色实色。(也可以这样写 background: linear-gradient(to top,white,white,rgba(0, 0, 0, 0));)

Han.PNG

当两个颜色的位置值相同时, 颜色之间会产生无限小的过渡区域。会产生条纹效果。

.div {
            width: 500px;
            height: 350px;
            background: linear-gradient(red 33%, yellow 33%, yellow 66%, blue 66%);
        }

Han.PNG

刚实现了简单的条纹效果, 接下来实现简单的条纹背景, 这里需要借助 background-size 来控制每一块条纹背景的大小, 并且 background-repeat 应该设置为 repeat。

.div {
            width: 500px;
            height: 350px;
            background: linear-gradient(to right, red 33%, yellow 0, yellow 66%, blue 0);
            background-size: 50px 100%;
        }

Han.PNG

现在我们背景已经可以横或竖向进行排列，如果我们想给他一个角度让其可以任意向任何方向该如何设置呢？如果单纯的给一个角度是否可以实现？让我们来看看

Han.PNG

图一：
      background: linear-gradient(45deg, red 50%, yellow 0);
      background-size: 50px 50px;
图二：
      background: linear-gradient(45deg, red 25%, yellow 0, yellow 50%, red 0, red 75%, yellow 0);
      background-size: 50px 50px;

虽然我们看到图二经过对值的修改，好像时达到了我们要的倾斜效果，但是如果将角度随意变化后就无法满足要求。(所以上面的方法有局限性)

实现各种角度的斜向条纹, linear-gradient() 的超级版 repeating-linear-gradient()

.div {
        width: 500px;
        height: 350px;
        background: repeating-linear-gradient(70deg, red, red 15px, yellow 0, yellow 30px, blue 0, blue 45px);
    }

Han.PNG

通过这个属性，随意改变角度就可以啦~而且不需要借助 background-size 控制大小

径向渐变 radial-gradient()

Han.PNG

图一：
background: radial-gradient(#58A, #FB3);
图二：
background: radial-gradient(70px, #58A, #FB3, #e45b5a);
图三：
background: radial-gradient(ellipse 150px 200px at 160px bottom, #58A, #FB3);

• 第一组参数用来指定渐变的类型[shape]、渐变的半径长度[size]、以及圆心的位置[position]。
  shape 指定渐变的类型 circle[圆形渐变] 和 ellopse[椭圆形渐变] ;
  size 半径长度为具体的长度值, 其中椭圆形渐变的半径长度可以用百分比。

• 也可以用以下四种指定半径长度:
  closest-side：半径长度为从圆心到离圆心最近的边
  closest-corner：半径长度为从圆心到离圆心最近的角
  farthest-side：半径长度为从圆心到离圆心最远的边
  farthest-corner：半径长度为从圆心到离圆心最远的角

• position 确定圆心的位置, 值必须跟在 at 后。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center 位置可以是具体的长度也可以是百分比。另外也可以用方位表示。横坐标可取的方位值有left、center、right, 纵坐标可取的方位值有top、center、bottom。

• 注意: 当渐变类型为 circle[圆形渐变] 时, 只能指定一个size值, 即直径; 当渐变类型为 ellopse[椭圆形渐变] 时, 需要指定两个个size值, 即水平半径, 垂直半径。
  为实现渐变, 还需要至少定义两个颜色结点, 每个颜色节点可由两个参数组成, [颜色值 位置值, 颜色值 位置值, ...], 其中颜色值为必填项, 位置值可为长度, 也可以是百分比, 非必填项。
  如: radial-gradient(red 30%, blue 80%);
  各个参数之间只用逗号分隔。

repeating-radial-gradient()
用重复的径向渐变创建图像。语法与radial-gradient()相同
对于所能制作的效果就不在这里进行展示了。

background的属性到这里就结束了，可能描述中有不足的地方也希望大家能够指出，过程中也参考了朋友们的文章，也让我得到了学习。希望大家能够继续关注编程大白话~！期待与你在下一篇相见...