详解background（background-color background-clip background-image 渐变函数）[第一天]
文章目录
- background
-
- background-color
- background-clip
- background-image
-
- background-repeat（平铺）
- background-position（背景位置）
- background-size（背景图大小）
- background-attachment（固定或滚动）
- 渐变函数
-
- linear-gradient() [线性渐变]
- css3实现字体渐变色
-
-
-
- radial-gradient() [径向渐变]
- 重复渐变的颜色后的距离参数含义
-
- repeating-linear-gradient() [重复的线性渐变]
- repeating-radial-gradient() [重复的径向渐变]
- 总渐变
-
- 使用角度
- 使用透明度（transparent）
-
-
background
CSS 属性定义背景效果：
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background-attachment
background-color
background-color 属性定义了元素的背景颜色。
CSS中，颜色值通常以以下方式定义：
- 十六进制，如：“#ff0000”
- rgb，如：“rgb(255,0,0)” 或者 rgba，如：“rgba(255,255,255,0.6)”
- 颜色名称，如：“red”
- HSL 或 HSLA ，见 详解文本格式（Text）[第二天]
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第1张图片](http://img.e-com-net.com/image/info8/747fdf5100d74c41987e1cff6cdd0e5f.png)
注意：
元素的背景是元素的总大小，包括填充(padding)和边界 (但不包括边距[margin])
2020/8/6补：
菜鸟在自己的博客里看自己的热搜词条，然后发现一个有趣的问题，这里就补充一下：
background-color和background-image:linear-gradient可以一起使用吗? 即：background-color可以和渐变函数一起使用吗？
答：可以，但是background-color不会生效！
代码：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <style> .div2 { background-image: linear-gradient(red, blue) } style> head> <body> <div style="background-image: linear-gradient(red,blue);background-color: aqua;width: 400px;height: 400px;"> div> <div class="div2" style="background-color: aqua;width: 400px;height: 400px;"> div> body> html>运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第2张图片](http://img.e-com-net.com/image/info8/ed7f7987f91e46c894924d00baed89c5.jpg)
background-clip
background-clip 属性规定背景的绘制区域
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第3张图片](http://img.e-com-net.com/image/info8/a3c77a95026946b790a0ba9afae8c086.jpg)
菜鸟发现要研究这个属性，就不能把边框弄成实现，要是虚线才能更好的看见效果！
实例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
script>
<style>
.a {
border:dotted 10px red;
margin: 50px;
padding: 50px;
background-color: aqua;
}
.b {
width: 200px;
height: 200px;
}
.c{
border:dotted 10px red;
margin: 50px;
padding: 50px;
background-color: aqua;
background-clip: content-box; /*这里可以f12修改看效果*/
}
style>
head>
<body>
<div class="a">
<p class="b">akjfhahkjanfp>
div>
<div class="c">
<p class="b">akjfhahkjanfp>
div>
body>
html>
border-box（默认值）：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第4张图片](http://img.e-com-net.com/image/info8/9453b4f5552341a7a4e7e4988c3f3901.jpg)
padding-box：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第5张图片](http://img.e-com-net.com/image/info8/f322ea04b37f4e31a72ac4c9938bce4a.jpg)
content-box：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第6张图片](http://img.e-com-net.com/image/info8/945b915927a7439d8aa3fc4360b87764.jpg)
background-image
background-image 属性描述了元素的背景图像，默认情况下（图片小于容器），背景图像进行平铺重复显示（在页面的水平和垂直方向平铺），以覆盖整个元素实体。（这样是非常难看的）
注意：
如果图片大于容器，就是把超过部分剪切掉（接下来无特殊声明都是图片小于容器）
background-repeat（平铺）
repeat-x/y
如果图像只在水平方向平铺 (repeat-x)或者垂直方向平铺（repeat-y），页面背景会更好些。
no-repeat
no-repeat属性值就是不进行平铺的意思，一般都是在左上角，只显示单个图片。
space
space 在不缩放的前提下尽可能多的重复图片，例如：如果一行放不下不压缩的三张图片则只会显示两张，如果一竖放不下不压缩的三张图片则只会显示两张，最终结果就是四个角放四张图片。
round
round 充分利用容器空间，重复n次之后（x/y轴方向）如果剩余空间 大于等于 imgWidth*50%则重复第n+1次，并进行缩放（非和原图的等比缩放）；否则拉伸已经重复的背景图。
注意：
若图片大于容器，round 缩放背景图至容器大小（非和原图的等比缩放）
background-position（背景位置）
可以利用 background-position 属性改变图像在背景中的位置。
注意：
这里不存在脱不脱离文档流一说，因为background-image本来就只是给某个元素加个背景，背景脱离文档流和不脱离和该元素没有关系
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第7张图片](http://img.e-com-net.com/image/info8/4e79dc6f58ce422b936d0bdc2a887db1.jpg)
注意：
这里的取值可以为 负数 ，而且在图片较大时很有用处可以结合下面的background-size一起使用
background-size（背景图大小）
2021/6/9补：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第8张图片](http://img.e-com-net.com/image/info8/b57f5ad2926c4386b0a8bde7928bd714.jpg)
这是菜鸟这次做项目的一个实例：
<h2 style="width: 100%;height:8%;position: fixed;background:url(https://labimg.bithachi.cn/car_head.jpg);background-size: 100% 400%;background-position:0% 60%;">h2>
这个图片很大，但是可以通过放大和截取的方式，使其适合当背景！
background-attachment（固定或滚动）
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第9张图片](http://img.e-com-net.com/image/info8/d07c0346064a4524abe9ff290685be73.jpg)
注意：
这是因为准确来讲，scroll相对于页面固定，而local是相对于页面的元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll。
代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
body
{
background-image:url('https://static.runoob.com/images/mix/smiley.gif');
background-repeat:no-repeat;
background-attachment:scroll;
}
.aaa{
height:100px;
overflow:scroll;
background-image:url('https://static.runoob.com/images/mix/smiley.gif');
background-repeat:no-repeat;
background-attachment:scroll;
}
.bbb{
height:100px;
overflow:scroll;
background-image:url('https://static.runoob.com/images/mix/smiley.gif');
background-repeat:no-repeat;
background-attachment:local;
}
style>
head>
<body>
<p>背景图片是固定的。尝试向下滚动页面。p>
<div class="aaa">
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
div>
<div class="bbb">
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
div>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
<p>背景图片是固定的。尝试向下滚动页面。p>
body>
html>
渐变函数
如果你仅仅认为，background-image只能搞图片背景？那你就大错特错了，css3渐变，赋予了其新的生命力！
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第10张图片](http://img.e-com-net.com/image/info8/ff3d4ca097cb40eca625bafc1659af0b.jpg)
linear-gradient() [线性渐变]
linear-gradient() 函数用于创建一个线性渐变的 “图像”。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色，终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第11张图片](http://img.e-com-net.com/image/info8/938ccde8c3ba4ac7af7d567e93bffd06.jpg)
注意：
direction默认为 to bottom 及 180deg，也就是从上至下
菜鸟在这里说一个骚操作（2022/8/20）
css3实现字体渐变色
p{
background-image:linear-gradient(90deg,#0072FF,#00EAFF,#01AAFF);
background-clip:text;
color:transparent;
}
但是这个有一点坑，就是你屏幕很宽，然后又设置 text-align:center 了的话，这个代码可能会只显示一种颜色，原因就是p是块级元素，会占满一行，然后颜色又是渐变，所以中间正好颜色差不多，这里建议是把p换成行内块元素！！！(display:flex也可以达到效果）
radial-gradient() [径向渐变]
radial-gradient() 函数用径向渐变创建 “图像”，径向渐变由中心点定义。
为了创建径向渐变你必须设置两个及以上终止色。
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第12张图片](http://img.e-com-net.com/image/info8/6820be76d05a4a79893b5a0d24172b91.jpg)
注意：
测试size需要把position设置成除了center以外的，不然无法看出区别
重复渐变的颜色后的距离参数含义
1、最后一个颜色后的距离参数代表重复渐变的其中一条的宽度，如果不设置，那就是非重复渐变（其实可以按第二条理解）
2、中间/最后一个颜色后的距离参数代表每一个颜色最后停留的位置，见代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: repeating-linear-gradient(red, yellow 30%,red 30%, green 60%);
}
style>
head>
<body>
<h1>重复的线性渐变h1>
<div id="grad1">div>
body>
html>
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第13张图片](http://img.e-com-net.com/image/info8/450480d8eb2d4a15ad660f9a11276ada.jpg)
这里重点看：黄色：30%，绿色60%，中间加的红色只是起一个分割作用，可以看出黄色结束正好是一半的位置。
这里菜鸟发现一个问题，如果后一个颜色结束位置小于/等于就会前一个就会产生突然变化颜色而不是渐变，如上个例子：
如果是最后一个小于前一个，则最后一个颜色无法显示，代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: repeating-linear-gradient(red, yellow 30%,red 30%, green 20%);
}
style>
head>
<body>
<h1>重复的线性渐变h1>
<div id="grad1">div>
body>
html>
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第15张图片](http://img.e-com-net.com/image/info8/ad7350f6590642adbe21c7e15572cf10.jpg)
3、第一个颜色后的距离参数代表第一个颜色开始的位置，其前方用最后方的颜色填充，见代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: repeating-linear-gradient(red 20%, yellow 30%,red 11%, green 60%);
}
style>
head>
<body>
<h1>重复的线性渐变h1>
<div id="grad1">div>
body>
html>
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第16张图片](http://img.e-com-net.com/image/info8/6649fa1cd2ba49d8872e0e89c1f9c345.jpg)
repeating-linear-gradient() [重复的线性渐变]
repeating-linear-gradient() 函数用于创建重复的线性渐变 “图像”。
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第17张图片](http://img.e-com-net.com/image/info8/c460548b84b8413f94dc162b515880c2.jpg)
注意：
180deg就是从上至下，也就是to bottom
repeating-radial-gradient() [重复的径向渐变]
repeating-radial-gradient() 函数用于创建重复的径向渐变 “图像”。
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第18张图片](http://img.e-com-net.com/image/info8/17bb3d471b0a483b96432613488d77e0.jpg)
总渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
这里给大家几个比较漂亮的效果，感觉渐变也只能做这些了：
代码：
.stacked-linear {
background:
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第19张图片](http://img.e-com-net.com/image/info8/e6340b9962d64f2d9eadf5d7c78aaeae.jpg)
代码：
.stacked-radial {
background:
radial-gradient(circle at 50% 0,
rgba(255,0,0,.5),
rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%,
rgba(0,0,255,.5),
rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%,
rgba(0,255,0,.5),
rgba(0,255,0,0) 70.71%) beige;
border-radius: 50%;
}
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第20张图片](http://img.e-com-net.com/image/info8/9663c554a6d14b95af38803ecd4ed016.jpg)
代码：
.multi-repeating-linear {
background:
repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
rgba(255, 0, 0, 0.5) 300px),
repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
rgba(255, 0, 0, 0.5) 230px),
repeating-linear-gradient(23deg, red 50px, orange 100px,
yellow 150px, green 200px, blue 250px,
indigo 300px, violet 350px, red 370px);
}
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第21张图片](http://img.e-com-net.com/image/info8/55ee84c9d86548ff8fd3ca5b325e75db.jpg)
代码：
.plaid-gradient {
background:
repeating-linear-gradient(90deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(-45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
repeating-linear-gradient(45deg, transparent, transparent 5px,
rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
background:
repeating-linear-gradient(90deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(0deg, transparent 0 50px,
rgba(255, 127, 0, 0.25) 50px 56px,
transparent 56px 63px,
rgba(255, 127, 0, 0.25) 63px 69px,
transparent 69px 116px,
rgba(255, 206, 0, 0.25) 116px 166px),
repeating-linear-gradient(-45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px),
repeating-linear-gradient(45deg, transparent 0 5px,
rgba(143, 77, 63, 0.25) 5px 10px);
}
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第22张图片](http://img.e-com-net.com/image/info8/3c83004c816e463cbb5912fc246af47b.jpg)
代码：
.multi-target {
background:
repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
rgba(255,255,255,0.5) 30px) top left no-repeat,
repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
background-size: 200px 200px, 150px 150px;
}
运行结果：
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第23张图片](http://img.e-com-net.com/image/info8/9d357877fd324ae58e1dace792216d07.png)
更多好看渐变色，见：免费的渐变背景CSS3样式
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
![详解background（background-color background-clip background-image 渐变函数）[第一天]_第24张图片](http://img.e-com-net.com/image/info8/84feeed5f572425bb08f030ed2750b4a.jpg)
请注意一些浏览器使用了旧的标准（不过现在大部分都是支持新标准），旧标准即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变，换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。
使用透明度（transparent）
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
实例：
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}