转跳到内容

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


只显示该作者

只有该作者的内容显示中。 返回到主题

推荐贴

将把每一步都写出来保证只要跟着来就能为你的帖子添加简易背景!!:397604175_SSB(3):

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

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

以下吐槽可以跳过不看

剧透

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

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

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

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

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

1、在图床上传选定的背景图,先复制红框中的链接,再复制其中的红色部分-2025-01-28-1312249129986f1289d28f.jpeg

-2025-01-28-132309.png

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

 

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大小姐帮忙修改:1151691507_SSB(4):

替换链接为第一步中复制的红色链接1db9c60dbfbcb714637a7e4df75b46b9.png

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

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

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

 

嘟嘟哒嘟哒嘟!

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

按下F12(以火狐为例),用元素选择器(红框中,查看器左边)选中文字元素,如图:

a93aa05867246f180fbf46b22423ea8d.png

xuanze-2025-01-28-160115.png

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

 

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

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

 

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

嘟嘟哒嘟哒嘟!

 

 

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

背景会自动把这行文字的后续内容包含进去,我们接在后面编写即可:1151691507_SSB(4):

如下:

嘟嘟哒嘟哒嘟!

豪情在天!IMG_20250126_193550.jpeg

IMG_20250128_040853.jpeg

 

 

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

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

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

 

现在我写了下面这篇:

 

嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!IMG_20250128_135426.jpeg

豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!IMG_20250126_193550.jpeg

IMG_20250128_040625.jpeg

大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!Image_1738044358733.jpeg

偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!DM_20250128143336_001.jpeg

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

 

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

 

嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!IMG_20250128_135426.jpeg豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!IMG_20250126_193550.jpeg大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!Image_1738044358733.jpeg偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!DM_20250128143336_001.jpeg

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

 

然后按下F12(以火狐为例),用左上角元素选择器(查看器左边)选中文字元素,如图:Desktop-Screenshot-2025.01.28---14.41.56

c3a2de8787c08666ee759bbccbe96aee.png

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

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

2.png

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

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

嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!嘟嘟哒嘟哒嘟!IMG_20250128_135426.jpeg豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!豪情在天!劲!IMG_20250126_193550.jpeg大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!大枣天下第一可爱!Image_1738044358733.jpeg偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!偏铝酸钠!DM_20250128143336_001.jpeg

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

 

用论坛的预览功能查看是否成功,随后重新分段并插入被删掉的图片,就完成了:1151691507_SSB(4):

 

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

(如果希望给不同段文字添加不同背景,记得去掉背景边框:mx040:

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

 

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

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

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

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

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

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

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

 

无了!!IMG_20250128_040625.jpeg

 

 

 

召唤口也!!!

剧透

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

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

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

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

 

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

 

 

,由贝东修改
注释
月晓 月晓 50.00节操 老大厉害
ㅤ凯ㅤ ㅤ凯ㅤ 50.00节操 表情包很好!
哥特的亡零 哥特的亡零 50.00节操 奇怪的知识增加了!偷偷私糖(≧∀≦)ゞ
SZRAY SZRAY 50.00节操 目瞪口呆ing
青山狐仙 青山狐仙 50.00节操 写得还好
较好的书呆子 较好的书呆子 50.00节操 好耶
  • 喜欢(+1) 7
  • 顶(+1) 1
链接到点评
发布于 (已修改)
7 小时前,幽月零说道:

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

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

 

:b3:還有是誰教你黑色字配深藍背景的,好歹把字換成白色吧(

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

,由贝东修改

贝东约寒幼藏出去郊游,结果被放了鸽子,只好抓住鸽子煲汤,小鱼路过喝了一口点了个赞并扔下4节操

链接到点评
7 小时前,SZRAY说道:

虽然阁下的教程亲民又详细(还很劲口牙!)

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

😎👌😭

这...这很难了呀:mx005:

贝东收和谐资源时被小萝莉围观良心发现失去-2节操

链接到点评
×
×
  • 新建...

重要消息

为使您更好地使用该站点,请仔细阅读以下内容: 使用条款