专栏30 天从入门到前端开发工程师每日精进实战指南日更 知识点 代码 面试真题前言本文将会把背景相关的属性一次性讲透每个属性都讲清楚用法、常见坑和实际场景。从基础的颜色、图片到平铺规则、定位、尺寸控制再到简写属性的坑点每个都讲清用法和真实开发场景。最后拿两个项目里最常见的场景落地实战网站顶部 Banner、带半透明遮罩的运营卡片。看完不止能写对背景还能写出适配性好、不出错的背景样式。同时我们做一个完整的个人名片卡片项目把所有背景知识点串起来写完就能直接用在自己的简历里。一、CSS 背景修饰属性总览核心在此将背景属性分成基础类、控制类和简写类一共 7个核心属性覆盖了 99% 的日常开发场景属性名核心作用常用值background-color设置背景颜色颜色名、十六进制、rgb、rgbabackground-image设置背景图片url(图片路径)background-repeat设置背景图平铺方式no-repeat、repeat-x、repeat-ybackground-position设置背景图位置方位名词、像素值、百分比background-size设置背景图尺寸cover、contain、固定宽高background背景属性简写合并以上所有属性background-attachment背景固定scroll、fixed注意背景属性都是加在盒子元素上的不是加给文字的。很多人刚学的时候会把background-color和文字颜色color搞混记清楚color管文字background管背景。二、background 全属性拆解用法与踩坑点掌握 background 系列所有常用属性的用法、取值与适用场景理解背景图平铺、定位、尺寸的控制逻辑能够独立实现 Banner、卡片等常见背景效果规避路径、简写、适配类的常见问题。background 是一个复合属性拆开来有多个子属性各自负责不同的功能。实际开发里既可以分开写也可以合并简写下面逐个讲清楚每个属性的作用和开发常用值。2.1 背景颜色background-color作用给元素设置背景颜色是最基础也最常用的背景属性。取值取值方式和文字颜色完全一致颜色名、十六进制、rgb/rgba支持透明色 transparent。开发细节小提示背景色是垫底的背景图会覆盖在背景色上面写背景图的时候一定要顺手加一个相近的背景色兜底。万一图片加载失败至少能保证背景和文字的对比度不会出现白字消失的问题这是很重要的开发习惯。示例.banner { background-color: #2c3e50; /* 深色兜底防止图片加载失败 */ background-image: url(images/banner.jpg); }常见用法/* 四种常用写法如下 */ /* 1. 颜色名写法简单但可选少 */ .box { background-color: red; } /* 2. 十六进制写法开发最常用 */ .box { background-color: #f5f7fa; } /* 3. rgb写法红绿蓝三原色 */ .box { background-color: rgb(52, 152, 219); } /* 4. rgba写法带透明度最后一个值0-10是全透明 */ .box { background-color: rgba(0, 0, 0, 0.5); }技巧rgba 是是做半透明遮罩的神器比如给背景图上面加一层半透明黑色遮罩再放白色文字可读性会非常好后面实战会用到。背景色默认是铺满整个盒子的包括内边距和边框区域不会算在外边距里。2.2 背景图片background-image作用给元素添加背景图片是背景样式的核心。语法url(图片路径)路径可以是相对路径、绝对路径、网络图片地址。.banner { /* 图片路径写在url()里可以是本地路径也可以是网络地址 */ background-image: url(./images/banner.jpg); }注意事项① 路径写错CSS 文件里写相对路径是相对于 CSS 文件本身的位置不是相对于 HTML 文件的。比如 CSS 在 css 文件夹里图片在 images 文件夹里就要写../images/banner.jpg很多新手在这里卡很久。②盒子必须有宽高背景图是靠盒子撑开的如果盒子没有宽高背景图完全显示不出来。很多人写了背景图没反应先检查盒子有没有宽高。③默认会平铺背景图默认会横向纵向重复平铺直到铺满整个盒子小图放进去会变成马赛克效果一般都要配合关闭平铺使用。补充可以同时写多张背景图用逗号分隔前面的图会覆盖在后面的图上面适合做叠加效果。2.3 背景平铺 background-repeat作用控制背景图是否重复平铺、怎么重复平铺。默认值是 repeat 也就是横向纵向都平铺这也是新手放一张图结果铺满整个页面的原因。常用取值① repeat默认值横向纵向都平铺铺满整个盒子适合小纹理、图案背景② no-repeat不平铺只显示一张图片开发最常用90% 的场景都用这个③ repeat-x只横向平铺适合做条纹背景、顶部装饰条④ repeat-y只纵向平铺适合做侧边装饰适用场景页面的点阵、斜线纹理背景用 repeatBanner、卡片的单张背景图一律用 no-repeat。语法.box { background-image: url(./images/icon.png); background-repeat: no-repeat; /* 关闭平铺只显示一张 */ }经验之谈90% 的场景下用背景图都会加 background-repeat: no-repeat新手写完背景图记得顺手加上。2.4 背景定位 background-position作用控制背景图在盒子里的显示位置默认是左上角是新手最容易调不对的属性。取值① 关键字方位名词水平方向left/center/right,垂直方向top/center/bottom,两两组合。比如center center就是居中right bottom就是右下角。只写一个值的话另一个默认center。/* 水平垂直居中 */ .box { background-position: center center; } /* 右上角 */ .box { background-position: right top; } /* 只写一个center默认两个方向都是居中 */ .box { background-position: center; }② 像数值background-position: 20px 50px第一个值是水平偏移从左往右第二个值是垂直偏移从上往下。适合精确控制位置。/* 距离左边20px距离顶部10px */ .box { background-position: 20px 10px; }③ 百分比background-position: 50% 50%效果和center center完全一致。百分比的计算逻辑是图片自身的百分比位置对齐容器的百分比位置所以 50% 就是图片中心对齐容器中心。.box { background-position: 50% 50%; }小提示开发最常用的就是center center或者简写center实现背景图居中。适用场景① 方位名词适合做 banner 图居中、图标定位② 像素值适合精准调整图标、装饰元素的位置2.5 背景尺寸 background-size重点 高频坑作用控制背景图的大小让图片适配盒子的尺寸是做响应式 Banner、适配不同屏幕的核心属性也是新手最容易搞混的。取值常用①固定像素值固定宽高比如300px 200px直接定死宽高图片可能拉伸变形一般不用②百分比相对于容器的尺寸比如100% 100%就是铺满容器同样会拉伸变形③cover覆盖模式等比例缩放图片完全铺满容器超出部分裁掉。图片不会变形但可能显示不全。适用场景网站 Banner、全屏背景、卡片封面。优先保证容器铺满允许图片裁切是开发最常用的取值。④contain包含模式等比例缩放图片直到完整显示在盒子里盒子可能会留白。适合 logo、图标保证图片完整显示。适用场景适用场景商品图展示、图标、logo 展示优先保证图片完整。/* cover铺满常用在banner */ .banner { background-size: cover; } /* contain完整显示常用在logo */ .logo-box { background-size: contain; }很多人分不清 cover 和 contain记住一句话就够了要铺满就用 cover要完整显示就用 contain。2.6 背景简写 background作用可以把上面所有背景属性合并成一行写代码更简洁。标准顺序推荐写法background: 颜色 图片 平铺 定位 / 尺寸;注意事项background-size必须写在background-position后面用斜杠/隔开不然浏览器会解析错误这是简写最容易踩的坑。示例/* 等价于分开写所有属性 */ .banner { background: #2c3e50 url(images/banner.jpg) no-repeat center center / cover; }/* 分开写 */ .box { background-color: #333; background-image: url(bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } /* 简写效果完全一样 */ .box { background: #333 url(bg.jpg) no-repeat center / cover; }建议刚学的时候先分开写不容易出错。等熟练了再用简写提升代码效率。注意位置和尺寸之间要用斜杠 / 隔开。简单的背景可以用简写复杂的多属性叠加分开写可读性更好不容易出错。2.7 背景固定 background-attachment作用控制背景图是否跟随页面滚动。常用取值scroll默认跟随页面滚动fixed固定在视口页面滚动背景不动适合做全屏视差背景效果。这个属性用得不算多但做一些视觉特效的时候很好用。三、项目实战官网 Banner 半透明卡片背景两个案例都是真实项目里 100% 会用到的场景不是玩具 Demo。第一个是企业官网的顶部 Banner第二个是运营位常用的图片 半透明遮罩 文字的卡片。3.1 案例一企业官网顶部 Banner这是每个网站都有的模块。要求背景图居中、等比例铺满、不拉伸中间有居中的标题和副标题有深色兜底背景色。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title官网Banner实战/title style * { margin: 0; padding: 0; } /* Banner容器 */ .banner { width: 100%; height: 420px; /* 深色兜底防止图片加载失败 */ background-color: #1a2a6c; /* 背景图不平铺、居中、cover铺满 */ background-image: url(https://picsum.photos/id/1018/1920/420); background-repeat: no-repeat; background-position: center center; background-size: cover; /* 文字居中 */ text-align: center; color: #fff; padding-top: 140px; box-sizing: border-box; } .banner-title { font-size: 36px; font-weight: bold; margin-bottom: 15px; } .banner-desc { font-size: 18px; opacity: 0.9; } /style /head body div classbanner h2 classbanner-title30天从零入门前端开发/h2 p classbanner-desc系统化学习路径 · 实战项目驱动 · 面试考点全覆盖/p /div /body /html实现要点用cover保证 Banner 在不同屏幕宽度下都能铺满高度左右适当裁切不会变形加了同色系的深色背景色兜底就算图片加载失败白色文字依然清晰可见背景图居中定位保证图片核心内容始终在屏幕中间适配不同分辨率。3.2 案例二带半透明遮罩的运营卡片电商、官网里很常见的效果背景图上面盖一层半透明黑色遮罩再放白色文字保证文字在任何图片上都清晰可读。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title半透明卡片背景实战/title style .card { width: 320px; height: 200px; margin: 30px auto; border-radius: 8px; overflow: hidden; position: relative; color: #fff; } /* 背景图层 */ .card-bg { width: 100%; height: 100%; background: url(https://picsum.photos/id/1060/640/400) no-repeat center / cover; position: absolute; top: 0; left: 0; z-index: 1; } /* 半透明遮罩层提升文字对比度 */ .card-mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; z-index: 2; } /* 文字内容层 */ .card-content { position: relative; z-index: 3; padding: 30px 25px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; } .card-title { font-size: 20px; font-weight: bold; margin-bottom: 8px; } .card-desc { font-size: 14px; opacity: 0.9; } /style /head body div classcard !-- 背景图 -- div classcard-bg/div !-- 半透明遮罩 -- div classcard-mask/div !-- 文字内容 -- div classcard-content h4 classcard-title前端实战训练营/h4 p classcard-desc30天带你从零基础到独立开发项目/p /div /div /body /html实现要点没有直接给卡片加背景图而是分层设计背景图层、遮罩层、内容层结构清晰后续修改样式很方便遮罩用rgba的半透明黑色不影响文字透明度只降低背景图的亮度保证文字永远清晰背景图依然用 cover 铺满保证卡片尺寸变化时背景图适配正常。四、完整实战项目带背景的个人名片卡片开发用今天学的所有背景属性结合之前的文本、盒子知识做一个完整的个人名片卡片。这个卡片可以直接放在个人简历的顶部也可以单独用作个人介绍实用性很强。!DOCTYPE html html head meta charsetutf-8 title个人名片卡片/title style /* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; background-color: #f0f2f5; padding: 50px 0; } /* 名片容器 */ .card { width: 600px; height: 350px; margin: 0 auto; border-radius: 12px; /* 核心背景图设置 */ background-image: url(https://img-blog.csdnimg.cn/202406251200001.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; /* 加阴影提升质感 */ box-shadow: 0 8px 24px rgba(0,0,0,0.15); position: relative; overflow: hidden; } /* 半透明遮罩层提升文字可读性 */ .card-mask { width: 100%; height: 100%; /* 黑色半透明遮罩 */ background-color: rgba(0, 0, 0, 0.55); padding: 50px 40px; color: white; } /* 姓名 */ .card-name { font-size: 32px; font-weight: bold; letter-spacing: 2px; margin-bottom: 8px; } /* 职位 */ .card-job { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.3); } /* 简介 */ .card-desc { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.9); margin-bottom: 30px; } /* 联系方式 */ .card-contact p { font-size: 14px; line-height: 2; color: rgba(255,255,255,0.85); } /style /head body div classcard !-- 遮罩层放在背景图上面文字放在遮罩里 -- div classcard-mask h2 classcard-name张 三/h2 p classcard-job前端开发工程师 / 初级/p p classcard-desc 3个月前端系统学习经验熟练掌握HTML、CSS、JavaScript基础 具备独立开发静态页面的能力热爱技术注重代码规范与用户体验。 /p div classcard-contact p 邮箱zhangsanexample.com/p p 电话138-xxxx-xxxx/p /div /div /div /body /html代码解析背景图核心设置给卡片盒子加了背景图设置no-repeat不平铺、center居中、cover铺满保证图片完整覆盖卡片不变形。半透明遮罩技巧用一个全屏的 div加rgba(0,0,0,0.55)半透明黑色背景放在背景图和文字中间。这是非常经典的写法解决了 “背景图太花文字看不清” 的问题是做 banner、卡片的通用技巧。文字层级优化主标题白色高亮次要文字降低透明度信息层级清晰不会因为背景杂而乱。细节质感提升加了圆角和阴影卡片立刻就有了悬浮感不再是平的。阴影用的也是 rgba 半透明更自然。五、企业开发规范与新手高频踩坑点5.1 企业开发通用规范背景图必加兜底色只要背景图上面有文字就一定要加同色系的背景色兜底避免图片加载失败导致文字不可见优先用 cover 做容器背景Banner、卡片类的背景统一用 cover 等比例铺满禁止用 100% 100% 拉伸图片变形严重很影响质感简写注意 size 的斜杠用 background 简写时size 必须跟在 position 后面用斜杠分隔不要图省事乱写顺序小图标优先用背景图页面里的小图标、装饰性图案用背景图实现不占用 HTML 结构位置更符合语义规范内容类的图片才用 img 标签。5.2 新手高频踩坑点坑 1背景图路径写错图片完全不显示最常见的低级错误。记住在 CSS 文件里写 url路径是相对于 CSS 文件的不是相对于 HTML 的。拿不准就先写网络图片地址测没问题再换本地路径。坑 2忘记加 no-repeat背景图平铺整个页面很多新手写背景图只写 image不写 repeat默认 repeat 就会把一张小图铺满整个元素。单张背景图一定顺手加上no-repeat。坑 3用 background-size: 100% 100% 强行铺满图片会被拉伸变形非常难看。除非刻意要拉伸效果否则一律用 cover 或 contain 等比例缩放。坑 4简写属性顺序乱样式不生效很多人简写的时候把 size 写在 position 前面或者漏了斜杠浏览器解析不出来尺寸属性直接失效。分开写虽然多几行代码但不容易出错。坑 5大背景图不压缩页面加载慢几 MB 的原图直接当 Banner 背景页面加载半天出不来。项目里的图片一定要压缩Banner 图控制在几百 KB 以内是前端的基本性能意识。六、高频面试点6.1 background-size 的 cover 和 contain 有什么区别各自适用什么场景两者都是让背景图等比例缩放不会拉伸变形核心区别是缩放的最终效果不同cover是覆盖模式等比例缩放直到完全铺满整个容器超出容器的部分会被裁切掉。效果是容器一定被填满但图片可能显示不完整。contain 是包含模式等比例缩放直到整张图片完整显示在容器里容器可能会出现空白区域。效果是图片一定完整显示但容器可能铺不满。适用场景cover 适合网站 Banner、全屏背景、卡片封面这类优先保证容器铺满、允许图片边缘裁切的场景是实际开发中用得更多的contain 适合商品图、logo、图标这类必须完整展示图片内容的场景。6.2 background-image 背景图和 HTML 的 img 标签有什么区别分别适用什么场景项目里怎么选型两者本质的区别是角色不同img 是 HTML 结构标签属于页面内容background-image 是 CSS 样式属于页面外观装饰。具体区别体现在几个方面语义不同img 是 (HTML) 内容的一部分有 alt 属性搜索引擎会抓取屏幕阅读器也能识别(CSS)背景图只是装饰没有语义不会被搜索引擎识别。加载时机不同img 是页面结构会和 HTML 同步加载背景图要等 CSS 加载完成后才会加载页面加载初期不会显示。交互不同img 可以右键保存、可以加点击事件、天然支持拖拽背景图没有这些原生交互。适配性不同img 本身是元素会撑开父容器背景图依赖容器尺寸容器没高度就显示不出来。使用场景内容类图片、有实际含义的图片用 img 标签装饰类、背景类的图片用 background 背景图项目选型原则很简单内容类图片用 img装饰类图片用背景图。 比如商品图、文章配图、产品展示图属于页面核心内容一律用 img页面的装饰性背景、图标、纹理图案属于美化装饰用背景图实现。6.3 如何让一张背景图在盒子里水平垂直居中且不平铺需要三个属性配合background-repeat: no-repeat;关闭平铺background-position: center center;水平垂直都居中一般还会配合background-size设置合适的尺寸比如cover或者contain简写也可以写成background: url(图片地址) no-repeat center;6.4 background 复合简写属性的书写顺序是什么有什么注意事项两者都是等比例缩放背景图不会让图片变形核心区别是缩放的目标不同cover覆盖模式缩放直到图片完全铺满整个盒子保证盒子没有留白但图片超出盒子的部分会被裁切。适合 banner、卡片背景优先保证盒子填满。contain包含模式缩放直到图片完整显示在盒子里保证图片完整不裁切但盒子可能会有留白。适合 logo、图标优先保证图片完整显示。七、练习把上面的名片代码跑起来自己换一张背景图调整遮罩的透明度看看不同效果给你的个人简历页面的头部区域加上背景图和半透明遮罩优化头部的视觉效果试着用 background 简写属性把代码里分开写的背景属性合并成一行验证效果是否一致八、总结背景样式看起来简单实则细节很多新手写出来的效果和专业开发写出来的差距往往就在这些细节里。核心要记住的几个点单张背景图必加no-repeat不要用默认平铺铺满容器优先用cover不要强行拉伸图片有文字的背景图一定要加背景色兜底这是很体现开发素养的细节简写属性要注意顺序和覆盖问题复杂样式分开写更稳妥。把这些细节练熟后面写页面模块的时候背景部分就不会再出低级错误视觉效果也会精致很多。核心知识点回顾基础背景background-color 背景色重点掌握 rgba 半透明写法背景图background-image 设置图片记得盒子要有宽高平铺控制background-repeat常用 no-repeat 关闭平铺位置控制background-position方位词和像素值两种写法尺寸控制background-sizecover 铺满和 contain 完整显示的区别简写属性background 合并写法熟练后提升代码效率实战技巧半透明遮罩 背景图 文字是通用的卡片 /banner 写法✨建议平时逛网站的时候多留意别人的卡片、banner 是怎么做的是不是用了背景图 遮罩的组合看得多了自己做的时候就有思路了。 学习进度 CSS 文本修饰距离成为初级前端工程师还有 19 天 如果你觉得这篇文章对你有帮助欢迎点赞 收藏⭐ 关注我后续会持续更新 30 天前端入门系列文章。有任何问题都可以在评论区留言我会一一回复。 专栏导航30 天从入门到前端开发工程师每日精进实战指南 海漫浩浩我亦苦作舟大家一起学习一起进步
【30天-从前端入门到前端开发工程师Day11】CSS 背景全属性实战：背景色 / 背景图 / 平铺 / 定位 / 尺寸，打造有层次感的页面视觉+网站 Banner+卡片遮罩效果落地+考点
专栏30 天从入门到前端开发工程师每日精进实战指南日更 知识点 代码 面试真题前言本文将会把背景相关的属性一次性讲透每个属性都讲清楚用法、常见坑和实际场景。从基础的颜色、图片到平铺规则、定位、尺寸控制再到简写属性的坑点每个都讲清用法和真实开发场景。最后拿两个项目里最常见的场景落地实战网站顶部 Banner、带半透明遮罩的运营卡片。看完不止能写对背景还能写出适配性好、不出错的背景样式。同时我们做一个完整的个人名片卡片项目把所有背景知识点串起来写完就能直接用在自己的简历里。一、CSS 背景修饰属性总览核心在此将背景属性分成基础类、控制类和简写类一共 7个核心属性覆盖了 99% 的日常开发场景属性名核心作用常用值background-color设置背景颜色颜色名、十六进制、rgb、rgbabackground-image设置背景图片url(图片路径)background-repeat设置背景图平铺方式no-repeat、repeat-x、repeat-ybackground-position设置背景图位置方位名词、像素值、百分比background-size设置背景图尺寸cover、contain、固定宽高background背景属性简写合并以上所有属性background-attachment背景固定scroll、fixed注意背景属性都是加在盒子元素上的不是加给文字的。很多人刚学的时候会把background-color和文字颜色color搞混记清楚color管文字background管背景。二、background 全属性拆解用法与踩坑点掌握 background 系列所有常用属性的用法、取值与适用场景理解背景图平铺、定位、尺寸的控制逻辑能够独立实现 Banner、卡片等常见背景效果规避路径、简写、适配类的常见问题。background 是一个复合属性拆开来有多个子属性各自负责不同的功能。实际开发里既可以分开写也可以合并简写下面逐个讲清楚每个属性的作用和开发常用值。2.1 背景颜色background-color作用给元素设置背景颜色是最基础也最常用的背景属性。取值取值方式和文字颜色完全一致颜色名、十六进制、rgb/rgba支持透明色 transparent。开发细节小提示背景色是垫底的背景图会覆盖在背景色上面写背景图的时候一定要顺手加一个相近的背景色兜底。万一图片加载失败至少能保证背景和文字的对比度不会出现白字消失的问题这是很重要的开发习惯。示例.banner { background-color: #2c3e50; /* 深色兜底防止图片加载失败 */ background-image: url(images/banner.jpg); }常见用法/* 四种常用写法如下 */ /* 1. 颜色名写法简单但可选少 */ .box { background-color: red; } /* 2. 十六进制写法开发最常用 */ .box { background-color: #f5f7fa; } /* 3. rgb写法红绿蓝三原色 */ .box { background-color: rgb(52, 152, 219); } /* 4. rgba写法带透明度最后一个值0-10是全透明 */ .box { background-color: rgba(0, 0, 0, 0.5); }技巧rgba 是是做半透明遮罩的神器比如给背景图上面加一层半透明黑色遮罩再放白色文字可读性会非常好后面实战会用到。背景色默认是铺满整个盒子的包括内边距和边框区域不会算在外边距里。2.2 背景图片background-image作用给元素添加背景图片是背景样式的核心。语法url(图片路径)路径可以是相对路径、绝对路径、网络图片地址。.banner { /* 图片路径写在url()里可以是本地路径也可以是网络地址 */ background-image: url(./images/banner.jpg); }注意事项① 路径写错CSS 文件里写相对路径是相对于 CSS 文件本身的位置不是相对于 HTML 文件的。比如 CSS 在 css 文件夹里图片在 images 文件夹里就要写../images/banner.jpg很多新手在这里卡很久。②盒子必须有宽高背景图是靠盒子撑开的如果盒子没有宽高背景图完全显示不出来。很多人写了背景图没反应先检查盒子有没有宽高。③默认会平铺背景图默认会横向纵向重复平铺直到铺满整个盒子小图放进去会变成马赛克效果一般都要配合关闭平铺使用。补充可以同时写多张背景图用逗号分隔前面的图会覆盖在后面的图上面适合做叠加效果。2.3 背景平铺 background-repeat作用控制背景图是否重复平铺、怎么重复平铺。默认值是 repeat 也就是横向纵向都平铺这也是新手放一张图结果铺满整个页面的原因。常用取值① repeat默认值横向纵向都平铺铺满整个盒子适合小纹理、图案背景② no-repeat不平铺只显示一张图片开发最常用90% 的场景都用这个③ repeat-x只横向平铺适合做条纹背景、顶部装饰条④ repeat-y只纵向平铺适合做侧边装饰适用场景页面的点阵、斜线纹理背景用 repeatBanner、卡片的单张背景图一律用 no-repeat。语法.box { background-image: url(./images/icon.png); background-repeat: no-repeat; /* 关闭平铺只显示一张 */ }经验之谈90% 的场景下用背景图都会加 background-repeat: no-repeat新手写完背景图记得顺手加上。2.4 背景定位 background-position作用控制背景图在盒子里的显示位置默认是左上角是新手最容易调不对的属性。取值① 关键字方位名词水平方向left/center/right,垂直方向top/center/bottom,两两组合。比如center center就是居中right bottom就是右下角。只写一个值的话另一个默认center。/* 水平垂直居中 */ .box { background-position: center center; } /* 右上角 */ .box { background-position: right top; } /* 只写一个center默认两个方向都是居中 */ .box { background-position: center; }② 像数值background-position: 20px 50px第一个值是水平偏移从左往右第二个值是垂直偏移从上往下。适合精确控制位置。/* 距离左边20px距离顶部10px */ .box { background-position: 20px 10px; }③ 百分比background-position: 50% 50%效果和center center完全一致。百分比的计算逻辑是图片自身的百分比位置对齐容器的百分比位置所以 50% 就是图片中心对齐容器中心。.box { background-position: 50% 50%; }小提示开发最常用的就是center center或者简写center实现背景图居中。适用场景① 方位名词适合做 banner 图居中、图标定位② 像素值适合精准调整图标、装饰元素的位置2.5 背景尺寸 background-size重点 高频坑作用控制背景图的大小让图片适配盒子的尺寸是做响应式 Banner、适配不同屏幕的核心属性也是新手最容易搞混的。取值常用①固定像素值固定宽高比如300px 200px直接定死宽高图片可能拉伸变形一般不用②百分比相对于容器的尺寸比如100% 100%就是铺满容器同样会拉伸变形③cover覆盖模式等比例缩放图片完全铺满容器超出部分裁掉。图片不会变形但可能显示不全。适用场景网站 Banner、全屏背景、卡片封面。优先保证容器铺满允许图片裁切是开发最常用的取值。④contain包含模式等比例缩放图片直到完整显示在盒子里盒子可能会留白。适合 logo、图标保证图片完整显示。适用场景适用场景商品图展示、图标、logo 展示优先保证图片完整。/* cover铺满常用在banner */ .banner { background-size: cover; } /* contain完整显示常用在logo */ .logo-box { background-size: contain; }很多人分不清 cover 和 contain记住一句话就够了要铺满就用 cover要完整显示就用 contain。2.6 背景简写 background作用可以把上面所有背景属性合并成一行写代码更简洁。标准顺序推荐写法background: 颜色 图片 平铺 定位 / 尺寸;注意事项background-size必须写在background-position后面用斜杠/隔开不然浏览器会解析错误这是简写最容易踩的坑。示例/* 等价于分开写所有属性 */ .banner { background: #2c3e50 url(images/banner.jpg) no-repeat center center / cover; }/* 分开写 */ .box { background-color: #333; background-image: url(bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } /* 简写效果完全一样 */ .box { background: #333 url(bg.jpg) no-repeat center / cover; }建议刚学的时候先分开写不容易出错。等熟练了再用简写提升代码效率。注意位置和尺寸之间要用斜杠 / 隔开。简单的背景可以用简写复杂的多属性叠加分开写可读性更好不容易出错。2.7 背景固定 background-attachment作用控制背景图是否跟随页面滚动。常用取值scroll默认跟随页面滚动fixed固定在视口页面滚动背景不动适合做全屏视差背景效果。这个属性用得不算多但做一些视觉特效的时候很好用。三、项目实战官网 Banner 半透明卡片背景两个案例都是真实项目里 100% 会用到的场景不是玩具 Demo。第一个是企业官网的顶部 Banner第二个是运营位常用的图片 半透明遮罩 文字的卡片。3.1 案例一企业官网顶部 Banner这是每个网站都有的模块。要求背景图居中、等比例铺满、不拉伸中间有居中的标题和副标题有深色兜底背景色。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title官网Banner实战/title style * { margin: 0; padding: 0; } /* Banner容器 */ .banner { width: 100%; height: 420px; /* 深色兜底防止图片加载失败 */ background-color: #1a2a6c; /* 背景图不平铺、居中、cover铺满 */ background-image: url(https://picsum.photos/id/1018/1920/420); background-repeat: no-repeat; background-position: center center; background-size: cover; /* 文字居中 */ text-align: center; color: #fff; padding-top: 140px; box-sizing: border-box; } .banner-title { font-size: 36px; font-weight: bold; margin-bottom: 15px; } .banner-desc { font-size: 18px; opacity: 0.9; } /style /head body div classbanner h2 classbanner-title30天从零入门前端开发/h2 p classbanner-desc系统化学习路径 · 实战项目驱动 · 面试考点全覆盖/p /div /body /html实现要点用cover保证 Banner 在不同屏幕宽度下都能铺满高度左右适当裁切不会变形加了同色系的深色背景色兜底就算图片加载失败白色文字依然清晰可见背景图居中定位保证图片核心内容始终在屏幕中间适配不同分辨率。3.2 案例二带半透明遮罩的运营卡片电商、官网里很常见的效果背景图上面盖一层半透明黑色遮罩再放白色文字保证文字在任何图片上都清晰可读。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title半透明卡片背景实战/title style .card { width: 320px; height: 200px; margin: 30px auto; border-radius: 8px; overflow: hidden; position: relative; color: #fff; } /* 背景图层 */ .card-bg { width: 100%; height: 100%; background: url(https://picsum.photos/id/1060/640/400) no-repeat center / cover; position: absolute; top: 0; left: 0; z-index: 1; } /* 半透明遮罩层提升文字对比度 */ .card-mask { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; z-index: 2; } /* 文字内容层 */ .card-content { position: relative; z-index: 3; padding: 30px 25px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; } .card-title { font-size: 20px; font-weight: bold; margin-bottom: 8px; } .card-desc { font-size: 14px; opacity: 0.9; } /style /head body div classcard !-- 背景图 -- div classcard-bg/div !-- 半透明遮罩 -- div classcard-mask/div !-- 文字内容 -- div classcard-content h4 classcard-title前端实战训练营/h4 p classcard-desc30天带你从零基础到独立开发项目/p /div /div /body /html实现要点没有直接给卡片加背景图而是分层设计背景图层、遮罩层、内容层结构清晰后续修改样式很方便遮罩用rgba的半透明黑色不影响文字透明度只降低背景图的亮度保证文字永远清晰背景图依然用 cover 铺满保证卡片尺寸变化时背景图适配正常。四、完整实战项目带背景的个人名片卡片开发用今天学的所有背景属性结合之前的文本、盒子知识做一个完整的个人名片卡片。这个卡片可以直接放在个人简历的顶部也可以单独用作个人介绍实用性很强。!DOCTYPE html html head meta charsetutf-8 title个人名片卡片/title style /* 全局重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; background-color: #f0f2f5; padding: 50px 0; } /* 名片容器 */ .card { width: 600px; height: 350px; margin: 0 auto; border-radius: 12px; /* 核心背景图设置 */ background-image: url(https://img-blog.csdnimg.cn/202406251200001.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; /* 加阴影提升质感 */ box-shadow: 0 8px 24px rgba(0,0,0,0.15); position: relative; overflow: hidden; } /* 半透明遮罩层提升文字可读性 */ .card-mask { width: 100%; height: 100%; /* 黑色半透明遮罩 */ background-color: rgba(0, 0, 0, 0.55); padding: 50px 40px; color: white; } /* 姓名 */ .card-name { font-size: 32px; font-weight: bold; letter-spacing: 2px; margin-bottom: 8px; } /* 职位 */ .card-job { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.3); } /* 简介 */ .card-desc { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.9); margin-bottom: 30px; } /* 联系方式 */ .card-contact p { font-size: 14px; line-height: 2; color: rgba(255,255,255,0.85); } /style /head body div classcard !-- 遮罩层放在背景图上面文字放在遮罩里 -- div classcard-mask h2 classcard-name张 三/h2 p classcard-job前端开发工程师 / 初级/p p classcard-desc 3个月前端系统学习经验熟练掌握HTML、CSS、JavaScript基础 具备独立开发静态页面的能力热爱技术注重代码规范与用户体验。 /p div classcard-contact p 邮箱zhangsanexample.com/p p 电话138-xxxx-xxxx/p /div /div /div /body /html代码解析背景图核心设置给卡片盒子加了背景图设置no-repeat不平铺、center居中、cover铺满保证图片完整覆盖卡片不变形。半透明遮罩技巧用一个全屏的 div加rgba(0,0,0,0.55)半透明黑色背景放在背景图和文字中间。这是非常经典的写法解决了 “背景图太花文字看不清” 的问题是做 banner、卡片的通用技巧。文字层级优化主标题白色高亮次要文字降低透明度信息层级清晰不会因为背景杂而乱。细节质感提升加了圆角和阴影卡片立刻就有了悬浮感不再是平的。阴影用的也是 rgba 半透明更自然。五、企业开发规范与新手高频踩坑点5.1 企业开发通用规范背景图必加兜底色只要背景图上面有文字就一定要加同色系的背景色兜底避免图片加载失败导致文字不可见优先用 cover 做容器背景Banner、卡片类的背景统一用 cover 等比例铺满禁止用 100% 100% 拉伸图片变形严重很影响质感简写注意 size 的斜杠用 background 简写时size 必须跟在 position 后面用斜杠分隔不要图省事乱写顺序小图标优先用背景图页面里的小图标、装饰性图案用背景图实现不占用 HTML 结构位置更符合语义规范内容类的图片才用 img 标签。5.2 新手高频踩坑点坑 1背景图路径写错图片完全不显示最常见的低级错误。记住在 CSS 文件里写 url路径是相对于 CSS 文件的不是相对于 HTML 的。拿不准就先写网络图片地址测没问题再换本地路径。坑 2忘记加 no-repeat背景图平铺整个页面很多新手写背景图只写 image不写 repeat默认 repeat 就会把一张小图铺满整个元素。单张背景图一定顺手加上no-repeat。坑 3用 background-size: 100% 100% 强行铺满图片会被拉伸变形非常难看。除非刻意要拉伸效果否则一律用 cover 或 contain 等比例缩放。坑 4简写属性顺序乱样式不生效很多人简写的时候把 size 写在 position 前面或者漏了斜杠浏览器解析不出来尺寸属性直接失效。分开写虽然多几行代码但不容易出错。坑 5大背景图不压缩页面加载慢几 MB 的原图直接当 Banner 背景页面加载半天出不来。项目里的图片一定要压缩Banner 图控制在几百 KB 以内是前端的基本性能意识。六、高频面试点6.1 background-size 的 cover 和 contain 有什么区别各自适用什么场景两者都是让背景图等比例缩放不会拉伸变形核心区别是缩放的最终效果不同cover是覆盖模式等比例缩放直到完全铺满整个容器超出容器的部分会被裁切掉。效果是容器一定被填满但图片可能显示不完整。contain 是包含模式等比例缩放直到整张图片完整显示在容器里容器可能会出现空白区域。效果是图片一定完整显示但容器可能铺不满。适用场景cover 适合网站 Banner、全屏背景、卡片封面这类优先保证容器铺满、允许图片边缘裁切的场景是实际开发中用得更多的contain 适合商品图、logo、图标这类必须完整展示图片内容的场景。6.2 background-image 背景图和 HTML 的 img 标签有什么区别分别适用什么场景项目里怎么选型两者本质的区别是角色不同img 是 HTML 结构标签属于页面内容background-image 是 CSS 样式属于页面外观装饰。具体区别体现在几个方面语义不同img 是 (HTML) 内容的一部分有 alt 属性搜索引擎会抓取屏幕阅读器也能识别(CSS)背景图只是装饰没有语义不会被搜索引擎识别。加载时机不同img 是页面结构会和 HTML 同步加载背景图要等 CSS 加载完成后才会加载页面加载初期不会显示。交互不同img 可以右键保存、可以加点击事件、天然支持拖拽背景图没有这些原生交互。适配性不同img 本身是元素会撑开父容器背景图依赖容器尺寸容器没高度就显示不出来。使用场景内容类图片、有实际含义的图片用 img 标签装饰类、背景类的图片用 background 背景图项目选型原则很简单内容类图片用 img装饰类图片用背景图。 比如商品图、文章配图、产品展示图属于页面核心内容一律用 img页面的装饰性背景、图标、纹理图案属于美化装饰用背景图实现。6.3 如何让一张背景图在盒子里水平垂直居中且不平铺需要三个属性配合background-repeat: no-repeat;关闭平铺background-position: center center;水平垂直都居中一般还会配合background-size设置合适的尺寸比如cover或者contain简写也可以写成background: url(图片地址) no-repeat center;6.4 background 复合简写属性的书写顺序是什么有什么注意事项两者都是等比例缩放背景图不会让图片变形核心区别是缩放的目标不同cover覆盖模式缩放直到图片完全铺满整个盒子保证盒子没有留白但图片超出盒子的部分会被裁切。适合 banner、卡片背景优先保证盒子填满。contain包含模式缩放直到图片完整显示在盒子里保证图片完整不裁切但盒子可能会有留白。适合 logo、图标优先保证图片完整显示。七、练习把上面的名片代码跑起来自己换一张背景图调整遮罩的透明度看看不同效果给你的个人简历页面的头部区域加上背景图和半透明遮罩优化头部的视觉效果试着用 background 简写属性把代码里分开写的背景属性合并成一行验证效果是否一致八、总结背景样式看起来简单实则细节很多新手写出来的效果和专业开发写出来的差距往往就在这些细节里。核心要记住的几个点单张背景图必加no-repeat不要用默认平铺铺满容器优先用cover不要强行拉伸图片有文字的背景图一定要加背景色兜底这是很体现开发素养的细节简写属性要注意顺序和覆盖问题复杂样式分开写更稳妥。把这些细节练熟后面写页面模块的时候背景部分就不会再出低级错误视觉效果也会精致很多。核心知识点回顾基础背景background-color 背景色重点掌握 rgba 半透明写法背景图background-image 设置图片记得盒子要有宽高平铺控制background-repeat常用 no-repeat 关闭平铺位置控制background-position方位词和像素值两种写法尺寸控制background-sizecover 铺满和 contain 完整显示的区别简写属性background 合并写法熟练后提升代码效率实战技巧半透明遮罩 背景图 文字是通用的卡片 /banner 写法✨建议平时逛网站的时候多留意别人的卡片、banner 是怎么做的是不是用了背景图 遮罩的组合看得多了自己做的时候就有思路了。 学习进度 CSS 文本修饰距离成为初级前端工程师还有 19 天 如果你觉得这篇文章对你有帮助欢迎点赞 收藏⭐ 关注我后续会持续更新 30 天前端入门系列文章。有任何问题都可以在评论区留言我会一一回复。 专栏导航30 天从入门到前端开发工程师每日精进实战指南 海漫浩浩我亦苦作舟大家一起学习一起进步
