# css background

# 基础用法

background 属性能够帮助我们为界面的背景进行一些设置。比如背景颜色、背景图片等等，它常见的属性如下：

值	属性	CSS
background-color	指定要使用的背景颜色	1
background-position	指定背景图像的位置	1
background-size	指定背景图片的大小	3
background-repeat	指定如何重复背景图像	1
background-origin	指定背景图像的定位区域	3
background-clip	指定背景图像的绘画区域	3
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	指定要使用的一个或多个背景图像	1

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

# -position 用法

值	描述
left top	left top (左上)
left center	left center (左中)
left bottom	left bottom (左下)
right top	right top (右上)
right center	right center (右中)
right bottom	right bottom (右下)
center top	center top (中上)
center center	center center (居中)
center bottom	(中下)
x% y%	第一个值是水平位置，第二个值是垂直。左上角是 0％0％。右下角是 100％100％。如果仅指定了一个值，其他值将是 50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是 0。单位可以是像素（0px0px）或任何其他 CSS 单位。如果仅指定了一个值，其他值将是 50％。你可以混合使用％和 positions
inherit	指定 background-position 属性设置应该从父元素继承
如果仅指定一个关键字，其他值将会是 "center"

# -size 用法

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto (自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格隔开指定高和宽，以逗号，隔开指定多重背景。如果只给出一个值，第二个是设置为 "auto (自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

# -repeat 用法

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image 不会重复
inherit	指定 background-repeat 属性设置应该从父元素继承

# -origin

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

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

# -clip

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

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

# -attachment

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

# 渐变

线性渐变 background: linear-gradient(#fff, #000)
径向渐变 background: radial-gradient(#fff, #000)
角向渐变 background: conic-gradient(#fff, #000)
重复渐变 background: repeating-linear-gradient、repeating-radial-gradient、repeating-conic-gradient

	.linear-gradient{
	background:linear-gradient(#000,#fff);
	}
	.radial-gradient{
	background:radial-gradient(#000,#fff);
	}
	.conic-gradient{
	background:conic-gradient(#000,#fff);
	}

渐变演示图

# 线性渐变

# 透明渐变

渐变可以是透明的，给背景上个颜色，如图所示：

background:linear-gradient(#000,transparent);

透明线性渐变
因此我们可以通过透明的背景遮罩，实现类似下面的效果，容器边缘透明渐变

其核心代码如下所示：

	.container {
	width: 600px;
	position: relative;
	margin: auto;
	border: 1px solid #999;
	padding: 5px;
	&::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100px;
	background: linear-gradient(90deg,transparent, #fff);
	pointer-events: none;
	}
	}

# 实色渐变

background:linear-gradient(#000 0%,#000 50%,#f00 50%,#f00 100%)

实色渐变
通过这个，生成三角形又有了新的写法，将颜色改成透明色，并旋转 45°

background:linear-gradient(45deg,#000 0%,#000 50%,transparent 50%,transparent 100%)

实色渐变应用1

# 渐变叠加

	.solidColorGradient {
	width: 200px;
	height: 200px;
	background:
	linear-gradient(135deg, transparent 10%, #000 0),
	linear-gradient(-135deg, transparent 10%, yellow 0),
	linear-gradient(-45deg, transparent 10%, deeppink 0),
	linear-gradient(45deg, transparent 10%, blue 0);
	background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
	background-position: top left, top right, bottom right, bottom left;
	background-repeat: no-repeat;
	}

渐变叠加

# 重复渐变

	background:
	repeating-linear-gradient(
	45deg,
	#f06a0e,
	#f06a0e 10%,
	#000 10%,
	#000 20%
	);

重复渐变

# 径向渐变

# 透明切片

和线性渐变一样，上述技巧也都适用，
比如通过线性渐变实现切图，核心代码如下：

background: radial-gradient(transparent 0%, transparent 70%, #FFF 70.2%, #fff 100%);

透明径向渐变-切图

# 半圆切片

同样的票卷样式也是类似，可以通过 background-repeat ，来生成多个半圆透明切片

	.radialGradient {
	width: 500px;
	height: 300px;
	background: black;
	position:relative;
	& ::before {
	content: " ";
	width: 50px;
	height: 100Vh;
	position:absolute;
	top:5px;
	background-repeat: repeat-y;
	background-size: 60px 60px;
	background-image: radial-gradient(circle at 0 25px, #fff 0,#fff 25px, transparent 25px);
	}
	}

# 波浪线

同理，波浪线也是同样的道理，通过控制径向渐变 x,y 大小，生成波浪形，此处不再赘述
波浪线票卷
渐变实现波浪下划线及动画

# 角向渐变（圆锥渐变）

# 基本属性

角向渐变基本 api

background:conic-gradient(#000,#fff);

角向渐变-基本api
和其他两种渐变不一样的是
linear-gradient 线性渐变的方向是一条直线，可以是任何角度。
radial-gradient 径向渐变是从圆心点以椭圆形状向外扩散。
而角向渐变从渐变的圆心、渐变起始角度以及渐变方向上来说，是这样的
角向渐变-基本属性
因此可以通过 from 270deg at 50px 50px ，设定角向渐变的圆心为图案的 50px 50px 处，并设定初始角度为 270deg 。

background:conic-gradient(from 270deg at 50px 50px,#000,#fff);

角向渐变-修改位置和角度

# 渐变图形

首先实现一个基本渐变图形

	width:200px;
	height:200px;
	border:solid 1px;
	border-radius:100px;
	background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);

基础渐变图形
我们可以通过设置 background-size: 50px 50px 实现类似贴图的效果。

	width:200px;
	height:200px;
	border:solid 1px;
	border-radius:100px;
	background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
	background-size:50px 50px;

background-size实现贴图效果

# 四角切片

	background: conic-gradient(
	from 270deg at 50px 50px,
	black 0%,
	black 90deg,
	transparent 90deg,
	transparent 360deg
	);

我们可以通过设置起始角度以及角向渐变的圆心，让前 90deg 的图形为黑色，而后 270deg 的图形，设置为了透明色。

这样利用角向渐变，在图像内部，又实现了一个小的矩形！

正方形切片

在上面的基础上，由于角向渐变是默认 repeat 的，所以通过控制渐变的位置 background-position: -25px -25px 就可以实现下面四角切片的效果。

	width: 200px;
	height: 200px;
	background: conic-gradient(
	from 270deg at 50px 50px,
	black 0%,
	black 90deg,
	transparent 90deg,
	transparent 360deg
	);
	background-position: -25px -25px;
	border: 1px solid #000;

四角切片

css