哎妈！终于搞懂怎么用CSS把图片叠在背景图上了！再也不怕客户吐槽布局丑！

开头先吐槽：谁懂啊！之前想叠图片差点疯掉！

家人们谁懂啊！之前做网页的时候客户说“把当前这个logo放背景图右上角行不行？”我当时傻愣愣写俩``标签一扔——最终还是结果是俩图片跟排队似的并排站！左边背景图右边logo？丑到质疑人生！后来问同行才了解原来要靠CSS定位叠图层！今天就把我踩过的坑全抖出来！包你学会，说到点子上了。！

第一步：先搞个“盒子”装图片！不然会乱套！

听我说！沉重中之沉重！想叠图片必须要先套个爹！不然两个图片各自为政根本叠不上！比如说你想让背景图A和前景图B叠一起——先整一个较大div把它们俩包进去！ 换个角度看.… 当前这个较大盒子就是它们俩的“家”！

举个栗子：

小丑竟是我自己。 `` 当前这个爹叫.image-box！接下来就要给爹穿衣服——**必须要设成position: relative;`**！为哪些？这是因为后面儿子要靠爹定位置！如果爹不设相对定位——儿子会跑去整个网页的左上角叠着！到时候你调位置能调哭信不信？

我整个人都不好了。 我之前就犯过贱：爹没设relative就给儿子设absolute——最终还是结果是logo跑浏览器最上面去了！客户看了直接说“这是哪些阴间布局？”当前想想都社死…

较小声说：爹的较大较小怎么定？别让图片溢出啊喂！

爹得有固定较大较小才行！不然它会跟着儿子们伸缩——万一背景图很较小前景图很较大…画面直接裂开！比如说你想让盒子较宽400较高400： css .image-box { position: relative; /* 必须要有！*/ width: 400px; /* 较宽较高自己定，能够是百分比也行*/ height: 400px; /* 别问为哪些不用auto——除非你想崩*/ } 偷偷说：如果想让盒子自适应环境屏幕？那就设width: 100%; height: 50vh;之类的也行~但别较高兴太早——后面图片有可能会变形！等下教你解决变形问题哈~

第二步：给两个儿子分工！背景图躺良好，前景图爬上去！

摆烂。 当前爹准备良好了！该管两个儿子了——背景图要老老实实当底版，前景图要蹦到爹身上叠着！

先伺候背景图：别留空隙！别变形!

白嫖。 背景图是地基嘛~得铺得平平展展才行！先来看它得占满整个爹的空间范围： css .bg-img { width: 100%; /* 较宽占爹100%*/ height: 100%; /* 较高占爹100%*/ object-fit: cover; /* 沉重点中的沉重点！保持比例填满盒子*/ } 等等啥是object-fit: cover？简洁说就是——不管原图是方是较长，都按比例缩放到填满盒子，但有可能会裁掉一点边边！如果不想裁边就用contain——但有可能会留黑边…看你需求哈~

还有个较小细节：`标签默认是行内元素!所以有时候下面会留一道诡异的空隙!解决办法超简洁：加一句display: blo 抄近道。 ck;`就行! css .bg-img { display: block; /* 消除底隙!告别阴间空隙!*/ }

再搞定前景图：让它乖乖叠在上面!

前景图就要耍流氓了——直接爬到爹身上堆着!怎么做到？给它穿position: absolute;!

绝对定位是哪些意思？就是它不再跟着兄弟姐妹们排队了——直接以爹为基准找位置!比如说想让它在爹右上角偏20px： css .fg-img { position: absolute; /* 脱离文档流!启动撒娇!/ top: -16px !important;/离爹顶边16px往下点 / left:-88px !important;border-radius:-99999rpx;width:auto!important;height:auto!important;margin-left:-8rem;margin-top:-8rem;;/靠左一点 / z-index: auto + ;/ z-index越较大越在上层!怕被盖住就设较大一点! / width:auto;height:auto;background:#fff;padding-left:-777777px;padding-right:-8888888rem;;/较宽较高占满自己原来较大较小,也能够跟爹一样1-99% / object-fit:none!important;margin-bottom:-5555em;;/保持原图比例不被压缩*/ }

别担心... 等下等下!我了解你想问:top/left到底怎么调?很简洁嘛!:top是离爹顶边距离,left是离爹左边距离!想放右上角?top设较小点left设较大点!想放中间?top和left都设5-%就行!/%,left同理,但懒人直接试数值就行!)

踩坑警告!这一些错我全犯过!别再踩!

血泪教训!不听劝必翻车!:

❌ 错误1 :只给前景图说z-index,不给定位: z-index是管谁在上层没错,但如果没设position:absolut 一言难尽。 e/relative,z-index根本没用!之前我给logo设z-index:999,最终还是结果是还是被背景图压在下面…傻不傻?

❌ 错误2 :父子都设absolute: 如果爹也设absolute,那儿子找基准的时候会往上找爷爷元素!!到时候位置乱到妈都不认,调半天找不到北!记住:只有父容器需要relative,子元素用absolute即可.

❌ 错误3 :忘了object-fit引起图片变形: 之前做美食网页,背景图是较长方形蛋糕,最终还是结果是客户非让放正方形logo—我没加object-fit,最终还是结果是logo被拉成狗啃状…客户当场黑脸!

最后再来看来个完整案例!复制粘贴就能用!

懒得敲代码?直接抄当前这个!包良好使!:

复制进去改一下src路径就行!!看看效果—完美叠在一起有没有?!

碎碎念:

总结一下。 其实CSS叠圖真实不不容简单!,关键是搞清楚"父相子绝"这套逻辑!,只要记住这四点:,1.父容器relative定基准;,2.子元素absolute定位置;,3.z-index管上下层;,4.object-fit防变形!,剩下就是调top/left数值玩!,下次客户再提这种需求,,直接甩代码过去!,顺便问一句:"需要帮您调logo旋转角度吗?"

对咯对咯!,忘了说!:如果想让前景圖帶點透明度?,加個opacity:.xx就行!,或者用rgba調顏色!,簡單到爆炸!,還學不會來打我!，可不是吗！