背景图片
.bg {
width: 100%;
height: 200px;
background-image: url("http://thirdqq.qlogo.cn/g?b=oidb&k=Rn6OZ40KQdjtiboWic17aP1Q&kti=ZSQQ7QAAAAE&s=640&t=1663684626");
background-size: 50px;
}
有些时候图片出不来，看看网络请求，是不是图片没请求下来
可能对方服务器设置了反爬或者权限
背景尺寸
background-size: contain; /* 保持图像原始宽高比，尽可能包含在元素内 */
background-size: cover; /* 保持图像原始宽高比，完全覆盖元素，可能部分图像超出 */
background-size: 100% 50%; /* 背景图像宽度为元素宽度，高度为元素高度的一半 */
background-size: 300px auto; /* 背景图像宽度固定为300px，高度自动调整 */
背景平铺
no-repeat：不平铺
repeat-x：横向平铺
repeat-y：纵向平铺
repeat：双向平铺，默认
图片位置
文字方位
左上，右上，右下，中心
background-position: left bottom;
数值定位
从左上角开始算
background-position: 10px 20px;
雪碧图
把多个小图片合到一个大图片里面，然后通过css图片定位方式，把图片显示出来
哔哩哔哩上 https://i0.hdslb.com/bfs/static/jinkela/space/asserts/icons.png 就用了雪碧图
为了防止你们学的时候，这个图片没了，我上传到我的服务器上了
https://image.fengfengzhidao.com/rj_0731/20240618113057.png
.bg {
width: 40px;
height: 40px;
background-image: url("https://image.fengfengzhidao.com/rj_0731/20240618113057.png");
background-position: -10px -266px;
background-repeat: no-repeat;
}
渐变
线性渐变
background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]...);
使用表示方位的单词
to top 表示从下往上的方式进行渐变
to bottom 表示从上往下的方式进行渐变
to right 表示从左往右的方式进行渐变
to left 表示从右往左的方式进行渐变
to top left 表示从右下向左上进行渐变(top和left可以交换位置，下同)
to top right 表示从左下向右上进行渐变
to bottom left 表示从右上向左下进行渐变
to bottom right 表示从左上向右下进行渐变
使用角度表示，例如0deg等同于to top， 90deg等同于to right
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
径向渐变
background-image: radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, … );
圆形
background-image: radial-gradient(circle, red, blue);
椭圆形
background-image: radial-gradient(ellipse, red, blue);
重复
background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
边框渐变
border-image: linear-gradient(方向，颜色1，颜色2 …) 内向偏移量;
border-image: linear-gradient(to bottom right, yellow, green) 1 1 1 1;
后面四个数字就是显示那一边的边框颜色
文字渐变
display: inline-block;
background-image: linear-gradient(to right, green, rosybrown);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 30px;
一些好看的渐变色网站
