CSS背景属性详解

一、背景颜色background-color1.1 基本语法background-color: 颜色值;1.2 示例.box1 { background-color: pink; background-color: #bfa; }1.3 特点特性说明作用范围可以为元素设置背景颜色与背景图片的关系可以同时设置背景颜色和背景图片背景颜色将作为背景图片的底色​二、背景图片background-image2.1 基本语法background-image: url(图片路径);2.2 图片显示规则图片与元素大小关系默认显示效果图片大于元素默认显示图片左上角​图片等于元素完整显示整个图片图片小于元素默认平铺以充满元素三、背景重复background-repeat3.1 可选值值描述repeat默认值双向平铺no-repeat不重复显示原图大小repeat-x水平方向重复repeat-y垂直方向重复3.2 示例background-repeat: no-repeat; /* 不重复 */ background-repeat: repeat-x; /* 水平平铺 */ background-repeat: repeat-y; /* 垂直平铺 */四、背景位置background-position4.1 关键字用法background-position: top left; /* 左上角 */ background-position: top right; /* 右上角 */ background-position: bottom left; /* 左下角 */ background-position: bottom right; /* 右下角 */ background-position: center; /* 居中单值 */ background-position: top; /* 顶部居中 */ background-position: left; /* 左侧居中 */4.2 偏移量用法background-position: 10px 10px; /* 水平10px垂直10px正值向右向下 */ background-position: -10px -10px; /* 向左10px向上10px负值向左向上 */ background-position: 50% 50%; /* 百分比定位 */五、背景范围background-clip5.1 可选值值描述border-box默认值背景延伸到边框外边缘padding-box背景出现在内容区和内边距区域content-box背景只出现在内容区5.2 示例background-clip: border-box; /* 默认背景覆盖到边框 */ background-clip: padding-box; /* 背景覆盖到内边距 */ background-clip: content-box; /* 背景只在内容区 */六、背景原点background-origin6.1 可选值值描述padding-box默认值从内边距开始计算偏移量content-box从内容区开始计算偏移量border-box从边框开始计算偏移量6.2 示例background-origin: border-box; /* 从边框开始定位 */ background-origin: padding-box; /* 从内边距开始定位默认 */ background-origin: content-box; /* 从内容区开始定位 */七、背景尺寸background-size7.1 具体值用法background-size: 100px 100px; /* 宽高具体值 */ background-size: 100px; /* 宽度100px高度auto */ background-size: 50% 50%; /* 百分比 */7.2 关键字用法值描述cover覆盖整个元素保持比例可能裁剪图片contain完整显示图片保持比例可能有留白background-size: cover; /* 覆盖整个元素 */ background-size: contain; /* 完整显示图片 */八、背景简写background8.1 语法特点background: [颜色] [图片] [位置/尺寸] [重复] [原点] [裁剪];8.2 示例background: no-repeat red url(./img/小图.webp) 50px 50px/cover;8.3 注意事项注意点说明顺序要求没有严格的顺序要求默认值未设置的属性使用默认值尺寸位置background-size必须写在background-position后面用/分隔九、雪碧图技术CSS Sprite9.1 什么是雪碧图雪碧图是将多个小图标整合到一张大图中通过背景定位显示所需图标的技术。9.2 优点优势说明减少请求次数多个图片整合为一张只需一次HTTP请求提高加载速度减小总图片大小加快请求速度9.3 使用步骤第一步确定要使用的图标在雪碧图中的位置 第二步测量图标的宽高尺寸 第三步创建相应尺寸的元素 第四步将雪碧图设置为背景图片 第五步设置偏移量显示正确的图标9.4 示例.box { width: 60px; /* 图标宽度 */ height: 60px; /* 图标高度 */ background-image: url(./亚马逊精灵图.png); /* 雪碧图路径 */ background-position: -273px -670px; /* 偏移到目标图标 */ }十、渐变背景10.1 线性渐变linear-gradient/* 方向渐变 */ background-image: linear-gradient(to bottom, red, yellow); /* 角度渐变 */ background-image: linear-gradient(45deg, red, yellow); /* 多色指定位置 */ background-image: linear-gradient(to right, red 10%, green 50%, blue 75%);10.2 重复线性渐变repeating-linear-gradientbackground-image: repeating-linear-gradient(to bottom, red 0%, yellow 20%);10.3 径向渐变radial-gradient/* 基本径向渐变 */ background-image: radial-gradient(red, yellow); /* 指定圆心和大小 */ background-image: radial-gradient(100px 100px at 100px 0px, red, yellow);10.4 重复径向渐变repeating-radial-gradientbackground-image: repeating-radial-gradient(red 0%, yellow 30%);10.5 渐变重要提示要点说明渐变属于图片通过background-image设置而非background-color颜色分布默认均分可手动指定位置百分比性能优化雪碧图技术可显著提高网站性能十一、属性速查表属性作用常用值background-color背景颜色red、#fff、rgb()background-image背景图片url(路径)background-repeat背景重复no-repeat、repeat-x、repeat-ybackground-position背景位置center、10px 20pxbackground-clip背景范围border-box、padding-box、content-boxbackground-origin背景原点border-box、padding-box、content-boxbackground-size背景尺寸cover、contain、100px 100px十二、总结本文详细介绍了CSS背景属性的完整知识体系基础属性背景颜色、背景图片、背景重复定位属性背景位置、背景范围、背景原点、背景尺寸简写属性background 的语法和使用注意事项雪碧图技术原理、优点和使用步骤渐变背景线性渐变、径向渐变及重复渐变掌握这些背景属性后你将能够灵活运用各种背景效果美化页面并通过雪碧图等技术优化网站性能。