背景颜色 background-color

背景颜色可以使用以下取值:

• 16进制
• gba
• rgba

background-color: #f00;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0.5);

背景图片 background-image

取值范围: 图片的地址

background-image: url('./images/1.png');

背景裁剪 background-clip

取值	说明
border-box	包括边框
padding-box	不含边框, 包括内边距
content-box	内容区域

background-clip: border-box;

背景重复 background-repeat

取值	说明
repeat	水平、垂直重复
repeat-x	水平重复
repeat-y	垂直重复
no-repeat	不重复
space	背景图片对称均匀分布

background-repeat: no-repeat;

背景定位 background-position

取值	说明
left	左对齐
right	右对齐
center	居中对齐
top	顶端对齐
bottom	底部对齐

background-position: center;
/* 
或者这样: 使用具体的值
background-position: x轴值, y轴值
background-position: 50px 50px;
*/
background-position: 50% 50%;

背景尺寸 bacckground-size

取值	说明
cover	背景完全覆盖, 可能会有背景溢出
contain	图片不溢出的放在容器中, 可能会漏出部分区域

background-size: 50% 100%;

组合简写 background

/* 颜色 背景图片地址 重复方式 图片位置 图片大小 */
background: red url(xj-small.png) no-repeat right 50%;

渐变背景

主要用到两个css函数:

• 线性渐变: linear-gradient
• 径向渐变: radial-gradient
• 锥形渐变: conic-gradient

/* 线性渐变 */
background-image: linear-gradient(to right, red, green, blue);

/* 径向渐变 */
background-image: radial-gradient(red, green, blue);

/* 锥形渐变 */
background-image: conic-gradient(red, green, blue);

css 的 linear-gradient 为什么可以作用到 background-image 上, 但是不能作用到 background-color 属性上?

它可以作为背景图像来使用。当你将 linear-gradient() 函数作为 background-image 的值时，它会创建一个渐变背景图像，并将其应用于元素的背景

回答来自 ChatGPT 3.5