分享 一步步教大家添加简易背景！一个被折磨半宿的傻瓜写的傻瓜式教程！

[贝东]

将把每一步都写出来保证只要跟着来就能为你的帖子添加简易背景！！

注意是简易，同时声明本人毫无编程基础以下办法大半是自行摸索出来的，相信有一种结绳记事的美

望大佬们能在评论不吝赐教！尽量以一种原始人也能懂的方式说明行吗（

以下吐槽可以跳过不看

剧透

我的活爹我一个学机械的工科人又看见这些字符以一种超乎我想象的方式排列我头都要炸了，再去一看教程一个个跟谜语人一样。毫无基础的我看这些如看天书，就好像幼儿园的幼稚儿看小学乘法计算虽然小学乘法计算不难但幼稚儿不背乘法表他就是不会啊啊啊啊啊啊啊啊

------------------------------------------------------------------------------------------------------------------------------------------------

我们先注册一个图床，点这：Z4A

再找一个正常水平的AI，这是一会要用到的米奇妙妙工具

------------------------------------------------------------------------------------------------------------------------------------------------

1、在图床上传选定的背景图，先复制红框中的链接，再复制其中的红色部分

------------------------------------------------------------------------------------------------------------------------------------------------

 

2、复制这段代码，其将实现背景图随鼠标滑动的效果，让我们不必担心背景图被拉伸

<div style="background-image: url(&quot;https://img.z4a.net/images/2025/01/26/1737538588040.jpeg&quot;); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; border: 4px groove rgb(211, 211, 211); padding: 24px; color: rgb(0, 0, 0); --darkreader-inline-border-top: #3c4144; --darkreader-inline-border-right: var(--darkreader-border-d3d3d3, #3c4144); --darkreader-inline-border-bottom: var(--darkreader-border-d3d3d3, #3c4144); --darkreader-inline-border-left: var(--darkreader-border-d3d3d3, #3c4144); --darkreader-inline-color: var(--darkreader-text-000000, #e8e6e3);" data-darkreader-inline-border-top="" data-darkreader-inline-border-right="" data-darkreader-inline-border-bottom="" data-darkreader-inline-border-left="" data-darkreader-inline-color="">

------------------------------------------------------------------------------------------------------------------------------------------------

3、请我们的AI大小姐帮忙修改

替换链接为第一步中复制的红色链接

（我们的AI大小姐非常强大，你可以请她帮忙更改背景边框、更改字体颜色、去除背景图随鼠标滑动的效果等等

------------------------------------------------------------------------------------------------------------------------------------------------

4、将修改好的代码加入文章，先随便打一行字：

 

嘟嘟哒嘟哒嘟！

------------------------------------------------------------------------------------------------------------------------------------------------

按下F12（以火狐为例），用元素选择器（红框中，查看器左边）选中文字元素，如图：

------------------------------------------------------------------------------------------------------------------------------------------------

 

右键包含文本的<p>，选择编辑 HTML,将修改好的代码插到最前

------------------------------------------------------------------------------------------------------------------------------------------------

 

点击查看器其他地方让代码保存，即可插入背景图，如下：

嘟嘟哒嘟哒嘟！

 

 

------------------------------------------------------------------------------------------------------------------------------------------------

背景会自动把这行文字的后续内容包含进去，我们接在后面编写即可

如下：

嘟嘟哒嘟哒嘟！

豪情在天！

 

 

------------------------------------------------------------------------------------------------------------------------------------------------

如果说打算为往期帖子或已经写好的添加背景，该怎么办呢

------------------------------------------------------------------------------------------------------------------------------------------------

 

现在我写了下面这篇：

 

嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！

豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！

大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！

偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！

------------------------------------------------------------------------------------------------------------------------------------------------

 

我们首先删掉大到能分割段落的图片，然后将所有段落合为一段，得到：

 

嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！

------------------------------------------------------------------------------------------------------------------------------------------------

 

然后按下F12（以火狐为例），用左上角元素选择器（查看器左边）选中文字元素，如图：

------------------------------------------------------------------------------------------------------------------------------------------------

右键包含文本的<p>，选择编辑 HTML,将修改好的代码插到最前

------------------------------------------------------------------------------------------------------------------------------------------------

点击查看器其他地方让代码保存，即可插入背景图，如下：

嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！嘟嘟哒嘟哒嘟！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！豪情在天！劲！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！大枣天下第一可爱！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！偏铝酸钠！

------------------------------------------------------------------------------------------------------------------------------------------------

 

用论坛的预览功能查看是否成功，随后重新分段并插入被删掉的图片，就完成了

 

如果不将文字整合成一段，就会发现每段文字前面都有一个<p>，这样插入代码后只会给这一段文字添加背景

（如果希望给不同段文字添加不同背景，记得去掉背景边框

------------------------------------------------------------------------------------------------------------------------------------------------

 

呃呃呃，完成啦！真是个笨办法呀，应该可以在不整合文字的情况下插入背景，但我实在不会...

本贴如有误请一定提出！有更好更快捷的办法也请一定提出！有什么其他想分享的排版方法也请一定提出！单纯来水也请一定来水！

总之想说啥都可以啦（（（（

是不是太把自己当回事了先

....这篇文章能帮到人吗

插好背景后一定要用论坛的预览功能先行查看喔

以及今天是除夕，也许早了些，但还是祝大家新年快乐喔

 

无了！！

 

 

 

召唤口也！！！

剧透

@doge2548先得感谢狗哥的帖子，实不相瞒代码就是从狗哥那里摘下来的，狗哥强大技术力伟大无需多言

以及感谢 @较好的书呆子凌晨还在陪我划水并表达了对这篇帖子的期待，没有这般期待也许这个下午我还躺在床上睡觉吧，不知有无达到预期...

这是我出新手村的第二篇帖子，短时间内能战胜两次懒癌对我来说很不容易的说是...要感谢 @较好的书呆子 @Kris Dreemurr@影喵醬@lemon19@哥特的亡零      
@ 凯@望月由爱@月晓  @LesMoon@Thurston@SZRAY对初来乍到的我的无限善意，大家的热情正是催生我写出这篇帖子的源动力

再次祝新手村的各位新年快乐啊啊啊啊这次就不放骷髅meme了（

 

写完这篇应该有300积分了，比我预想的快很多，本来想只靠水回复攒积分的...不知下一次打败懒癌是什么时候呢...

 

 

周二 18:37，由贝东修改

[ㅤ凯ㅤ]

噢噢~厉害啊~居然@我时把我名字里的空格去掉了~有心了~

另外表情包很劲！

 

周二 10:39，由ㅤ凯ㅤ修改

[较好的书呆子]

非常简单易懂且生草的教程呢

基本上就是省去了自己敲属性代码的过程，转而将其交给AI完成

对于毫无基础的新人来说确实能称得上好上手了（拥有了AI之力的我，是无敌的！）

以及感谢什么的，真的是过誉了，实际上我是在敲同盟简历的过程中顺便划划水来着

主播主播，你的教程确实很容易看懂，但还是太吃操作了，有没有......

[攸薩]

超强的耶~这样会搞成脚本的情况吗~

话说佬要不要加入幕僚团帮忙哇!感觉很有能力耶~https://sstm.moe/topic/239275-幕僚团招募贴-第四期！丰厚奖励～～/

[LesMoon]

好强，虽然对我来说约等于天书但是已经是可以复现的了

[幽月零]

想分行的話其實可以用table，table tbody [tr td]這樣。對於瀏覽器的話不加這個tbody的話也行，甚至你用div也行，但是論壇不接受，提交之後你會發現整個tag都被吞掉。

不過直接給ai一講它就能給你改好，問題不大

 

還有是誰教你黑色字配深藍背景的，好歹把字換成白色吧（

周二 13:53，由幽月零修改

[SZRAY]

虽然阁下的教程亲民又详细（还很劲口牙！）

但在下没有自己的电脑，阁下又该如何应对呢

😎👌😭

[哥特的亡零]

奇怪的知识增加了！不愧是贝东！

接下来快进到贝东成为版主（

[starF]

2 小时前，哥特的亡零说道:

奇怪的知识增加了！不愧是贝东！

接下来快进到贝东成为版主（

版主都这么流水的吗随便在最新帖子逛逛就看到亡灵桑又在劝诱别人成为版主

[贝东]

7 小时前，幽月零说道:

想分行的話其實可以用table，table tbody [tr td]這樣。對於瀏覽器的話不加這個tbody的話也行，甚至你用div也行，但是論壇不接受，提交之後你會發現整個tag都被吞掉。

不過直接給ai一講它就能給你改好，問題不大

 

還有是誰教你黑色字配深藍背景的，好歹把字換成白色吧（

呱，已经换成白色了，关掉我游览器的暗色插件才发现论坛这白的刺眼的背景也太阴间了罢

周二 19:03，由贝东修改

[贝东]

7 小时前，SZRAY说道:

虽然阁下的教程亲民又详细（还很劲口牙！）

但在下没有自己的电脑，阁下又该如何应对呢

😎👌😭

这...这很难了呀

[贝东]

7 小时前，哥特的亡零说道:

奇怪的知识增加了！不愧是贝东！

接下来快进到贝东成为版主（

等我不当人了让AI大小姐占据我的身体....（

[贝东]

8 小时前，攸薩说道:

超强的耶~这样会搞成脚本的情况吗~

话说佬要不要加入幕僚团帮忙哇!感觉很有能力耶~https://sstm.moe/topic/239275-幕僚团招募贴-第四期！丰厚奖励～～/

全仰仗AI大小姐的神力呀...

[攸薩]

2 小时前，贝东说道:

全仰仗AI大小姐的神力呀...

能用ai也是很有能力，幕僚团也收零经验哦

[哥特的亡零]

11 小时前，starF说道:

版主都这么流水的吗随便在最新帖子逛逛就看到亡灵桑又在劝诱别人成为版主

目标是全员版主（X

新春快乐呀~

[哥特的亡零]

6 小时前，贝东说道:

等我不当人了让AI大小姐占据我的身体....（

然后俺就可以顺理成章地与阁下结婚（X

[Thurston]

太专业了

[starF]

3 小时前，哥特的亡零说道:

目标是全员版主（X

新春快乐呀~

新春快乐捏
这好像还是我元旦以来第一次说这话

[哥特的亡零]

3 小时前，starF说道:

新春快乐捏
这好像还是我元旦以来第一次说这话

真假，那之前是说什么

[starF]

3 分钟前，哥特的亡零说道:

真假，那之前是说什么

不说，因为新年快乐这四个字对我而言很难自然的说出口

[veryfiting]

哦，谢特，这就是大佬赐福吗。啊，该死的伟大光辉，晒死劳资了

[doge2548]

强大！

而且文案好癫！

喜欢到极啊！

[较好的书呆子]

9 小时前，starF说道:

不说，因为新年快乐这四个字对我而言很难自然的说出口

那你可以开始耶咦耶咦耶咦耶哦哦↗↘↗↘↗↘↗↘

[SZRAY]

1 小时前，较好的书呆子说道:

那你可以开始耶咦耶咦耶咦耶哦哦↗↘↗↘↗↘↗↘

呆子不语，只是一味地耶↗咦↘耶↗咦↘耶↗咦↘耶↗啊↘哦……

[哥特的亡零]

14 小时前，starF说道:

不说，因为新年快乐这四个字对我而言很难自然的说出口

因为乐不起来吗（

所以平时都是怎样庆祝新年或其他节日的？