这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战
背景
01. 基本语法
-
属性：
background -
延伸：常用的几个属性
属性 说明 background-color背景颜色 background-image背景图像 background-repeat背景图像重复规则 background-position背景图像的位置 background-attachment背景图像是否固定 background-origin背景图像的定位中心 background-size背景图像的大小 background-clip背景图像的绘制处理
div.test1 {
width: 300px;
height: 300px;
background-color: darkcyan;
/* 背景图片地址 */
background-image: url(./logo.png);
/* 背景平铺,repeat,no-repeat,repeat-x,repeat-y */
background-repeat: no-repeat;
/* 背景图片位置 */
/* 第一个是X坐标，第二个是Y坐标 */
/* 1.方位名词 */
/* background-position: left center; */
/* 2.具体数值 */
/* background-position: 50px 100px; */
/* 3.混合数值 */
background-position: left 30px;
/* 背景图像固定,可用于视差效果 */
/* background-attachment有两个值，默认scroll,随对象内容滚动 */
/* background-attachment: fixed; */
}
div.test2 {
width: 300px;
height: 300px;
/* 背景复合写法 */
/* background: 颜色 图片 平铺 滚动 位置; */
background: aquamarine url(./logo.png) no-repeat fixed center;
}
线性渐变
01. 基本语法：
-
background: linear-gradient(direction, color1 20%, color2 30%)-
渐变可以设置在
background上，也可以配置在在background-image属性上，因为渐变即相当于一张图片
## 不同浏览器需要添加不一样的前缀 .box { background: linear-gradient(right, red, blue); /* 标准的语法 */ background: -webkit-linear-gradient(left, red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(top, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom, red, blue); /* Firefox 3.6 - 15 */ } -
02.参数配置
- 方位参数：设置方位，可以是方位名词，也可以是角度值
deg- 默认值为
top，从上往下 - 可以设置
left、right、bottom，分别表示从左开始、从右开始，从下开始 - 可以设置
left top、left bottom等等，表示从左上开始、从左下开始 - 可以直接设置角度值
30deg、45deg、60deg等等，表示渐变方向与水平轴X轴的角度
- 默认值为
- 颜色参数：设置颜色和颜色所占的宽度
- 颜色参数可以有两个值：
- 第一个值是颜色，有效的颜色值即可
- 第二个值是
- 可以是颜色所占的宽度、比例
- 可以是颜色开始的地方
03. 实例理解
-
除设置颜色以外，其它都使用默认值
.box { background: -webkit-linear-gradient(red, blue) }
默认渐变方向从上到下，渐变区域为
0% ~ 100%
-
手动设置颜色的宽度
.box { background: -webkit-linear-gradient(red 25%, blue) }
从
0% ~ 25%的区域为red纯色，（有一个稍微明显的矩形区域）从
25% ~ 100%的区域为red ~ blue的渐变区域
-
设置两个值
.box { background: -webkit-linear-gradient(red 25%, blue 75%) }
从
0% ~ 25%的区域为red纯色从
25% ~ 75%的区域为red ~ blue的渐变区域从
75% ~ 100%的区域为blue纯色
-
如果两个值相同
.box { background: -webkit-linear-gradient(red 30%, blue 30%) }
从
0% ~ 30%的区域为red纯色从
30% ~ 30%的区域为red ~ blue的渐变区域，即渐变区域宽度为0从
30% ~ 100%的区域为blue纯色
-
当然，不止两个颜色，还可以设置多个颜色
.box { background: -webkit-linear-gradient(left, red, orange, yellow, green, cyan, blue, purple); }
多个颜色，从
0% ~ 100%区域自动分配各个颜色占比
-
当然，不止一个渐变，还可以设置多个渐变
- 设置多个渐变，需要颜色有透明度，否则会被覆盖
.box { background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.7) 30%, rgba(0, 0, 255, 0.7) 30%), -webkit-linear-gradient(rgba(255, 0, 0, 0.7) 30%, rgba(0, 0, 255, 0.7) 30%); }
第一个渐变为从左到右，第二个渐变为从右到左
第三个渐变为前两个渐变的叠加
接下来加入背景的其它属性，来控制渐变的效果
因为渐变其实也是一张图片，所以可以对图片进行设置的属性也适用于渐变
-
使用
background-size控制渐变显示尺寸.box1 { background-image: -webkit-linear-gradient(left, pink 50%, skyblue 50%); background-size: 50px auto; } .box2 { background-image: -webkit-linear-gradient(top, pink 50%, skyblue 50%); background-size: auto 50px; }
注：渐变是什么方向的，
background-size就要设置哪一个轴的宽度
-
同时设置两个渐变
.box3 { background-image: -webkit-linear-gradient( left, rgba(255, 192, 203, 0.5) 50%, rgba(135, 206, 235, 0.5) 50% , -webkit-linear-gradient(top, rgba(255, 194, 204, 0.5) 50%, rgba(135, 206, 235, 0.5) 50%) ; background-size: 50px 50px; }
控制一下两个渐变的颜色透明度，可以实现方格效果的背景
-
当然，还可以改变下方向参数
这里解释下颜色参数后面的
0：这个
0表示当前颜色的起始位置，是上一个颜色的结束位置.box1 { background-image: -webkit-linear-gradient( 45deg, rgba(255, 0, 0, 0.5) 25%, /* 第一个颜色，默认从 0% 开始，然后到 25% 为该颜色区域 */ rgba(128, 0, 128, 0.5) 0, /* 0，表示该颜色的区域是上一个颜色的结束位置，即 25% */ rgba(128, 0, 128, 0.5) 50%, rgba(255, 0, 0, 0.5) 0, rgba(255, 0, 0, 0.5) 75%, rgba(128, 0, 128, 0.5) 0, rgba(128, 0, 128, 0.5) /* 最后一个参数默认结束位置为 100% */ ); } .box2 { background-image: -webkit-linear-gradient( 135deg, rgba(255, 0, 0, 0.5) 25%, rgba(128, 0, 128, 0.5) 0, rgba(128, 0, 128, 0.5) 50%, rgba(255, 0, 0, 0.5) 0, rgba(255, 0, 0, 0.5) 75%, rgba(128, 0, 128, 0.5) 0, rgba(128, 0, 128, 0.5) ); } .box3 { background-image: -webkit-linear-gradient( 45deg, rgba(255, 0, 0, 0.5) 25%, rgba(128, 0, 128, 0.5) 0, rgba(128, 0, 128, 0.5) 50%, rgba(255, 0, 0, 0.5) 0, rgba(255, 0, 0, 0.5) 75%, rgba(128, 0, 128, 0.5) 0, rgba(128, 0, 128, 0.5) ), -webkit-linear-gradient( 135deg, rgba(255, 0, 0, 0.5) 25%, rgba(128, 0, 128, 0.5) 0, rgba(128, 0, 128, 0.5) 50%, rgba(255, 0, 0, 0.5) 0, rgba(255, 0, 0, 0.5) 75%, rgba(128, 0, 128, 0.5) 0, rgba(128, 0, 128, 0.5) ); /* 这里设置下尺寸 */ background-size: 50px 50px; }
虽然，但是：
不是每个角度都像
45deg这么整齐的（0%、25%、50%、75%、100%）其它角度需要使用勾股定理计算下具体的值，否则会出现一些怪异的效果~~（@_@）~~
比如：设置为
60deg
-
将渐变设置在
background-image上的一个好处是，可以同时设置背景颜色background-color.box { background-color: green ; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 50%, transparent 50%); background-size: auto 50px; }
径向渐变
01. 简单介绍：
-
径向渐变与线性渐变大同小异
-
background: radial-gradient([shape size at position], color1 20%, color2 30%) -
参数说明：
-
shape：表示径向渐变的形状- 默认值为
ellipse - 可选值为
ellipse椭圆、circle圆
- 默认值为
-
size：表示径向渐变的半径大小-
默认值：
farthest-corner -
可选值有
-
closest-side：从中心到最近边的距离 -
farthest-side：从中心到最远边 -
closest-corner：从中心到最近角的距离 -
farthest-corner：从中心到最远角的距离
这里的边、角，指的是设置渐变的HTML元素的边、角
-
-
也可以设置为具体的值：数字、百分比
- 圆只需要设置一个值
- 椭圆需要分别设置宽高两个值
-
-
position：表示渐变的中心- 默认值为：
center center - 可选值：
top、left、right、bottom、center - 也可设置具体的数值、百分比：X轴、Y轴
- 默认值为：
-
02. 举个栗子
-
普通设置
.box1 { background: radial-gradient(circle, yellow, red); } .box2 { background: radial-gradient(ellipse, yellow, red); }
-
主要理解
size属性的作用为了方便查看，这里全部显示纯色，没有过渡区域
.box1 { background: radial-gradient( circle closest-side at 65% 65%, yellow 25%, blue 0, blue 70%, black 0, black ); } .box2 { background: radial-gradient( circle farthest-side at 65% 65%, yellow 25%, blue 0, blue 70%, black 0, black ); } .box3 { background: radial-gradient( circle closest-corner at 65% 65%, yellow 25%, blue 0, blue 70%, black 0, black ); } .box4 { background: radial-gradient( circle farthest-corner at 65% 65%, yellow 25%, blue 0, blue 70%, black 0, black ); }
所有半径都标出来了
- 图1为：
closest-side，从中心点到最近边为径向渐变的半径大小
- 从
0% ~ 25%为yellow- 从
25% ~ 75%为blue- 从
75% ~ 100%为black- 需要注意的是：
- 这里的百分比是相对于半径大小的
- 如果径向渐变的大小没有铺满元素，则剩余空间会全部填充径向渐变的最后一个颜色，所以这里看到
black区域占很大部分- 图2为：
farthest-side，到最远边为径向渐变的半径大小- 图3为：
closest-corner，到最近角为径向渐变的半径大小- 图4为：
farthest-corner，到最远角为径向渐变的半径大小
本人前端小菜鸡，如有不对请谅解
