知乎日报微信公众号文章布景的格子底纹，是怎样制 …

我本迷茫

来历：知乎



本人在运营一个公众号，想晓得这个都雅的底纹是怎样做到的，如图





原文地址：https://www.zhihu.com/question/59144152
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。

123457682

不敢写太细。但我会只管的写清楚。
方式实在和高赞的方式差不多，可是我这个会更简单了然。
拼集着看吧。
橙汁没有核：一分钟教你若何点窜公众号文章布景

街角386

胖友们大师好呀，我是三儿
今早刚在公众号出了一篇微信公众号推文里格子布景若何设备
就看到了这个题目，所幸就把公众号的教程拿到这里给大师看看




格子布景在那里？


有三种方式可以找到格子布景哦！
一、在135编辑器中找到『布景』，然后找到『方格斜纹』，点击第一个就是啦！




二、在135编辑器中搜索『格子布景』，出现的第一个就是三儿常用的格子布景啦！固然还有一些其他款式的格子布景哦。




三、简单粗鲁，间接搜索格子布景的ID：90102，就能找到啦！




若何设备格子布景呢？


设备格子布景简直不要太轻易好嘛！

编写图文
▼
利用格子布景

▼
完成

好啦！以上就是我们的全数内容啦！
咳咳，还是给胖友们放个图吧。




好！
教程竣事，我们下期再会！




（老板：嗯？）

哈哈哈哈哈，怎样会竣事呢？我那末爱（怕）你（老）们（板）！接下来三儿要为大师带来的是格子布景的进阶版教程哦！

布景参数设备


设备完格子布景后，我们发现格子布景的双方不！一！样！啊！身为童贞座的三儿，怎样会容忍这样的工作发生！！！




我们可以经过【布景设备】，经过点窜布景的【对齐方式】来到达理想的结果。你也可以按照自己的需要来设备其他的参数哦！




部分布景设备


“三儿，大师都设备了格子布景，我想做一个纷歧样的崽儿！只给一部份内容设备可以吗？”
固然可以啦！我们在135编辑器中搜索【格子布景】，选中你需要设备格子布景的地区，然后点击格子布景，便可以设备完成了。




这里要留意的是：假如需要继续利用格子布景的话，在段落前面用回车键换行便可以了。假如接下来输入的部分不需要格子布景，需要点击【后空行】哦！




自界说布景图


“我有一张图片特此外喜好，可以用来当文章的布景图吗？”
固然也是可以的，我们可以在布景设备中，上传自己的图片来当文章的布景图。




这里需要留意的是：我们需要上传的图片只管以浅色彩或单一元素为主，牢记不要设备花里胡哨的布景，需要和文章整体的排版气概搭配起来利用哦！

其他格子款式


除了我们常用的黑白格子外，我们的设想师蜜斯姐还新增了其他范例的格子布景哦！

▼举几个例子



135编辑器格子款式ID：88159



135编辑器格子款式ID：95117



135编辑器格子款式ID：95117



135编辑器格子款式ID：95654



135编辑器格子款式ID：86526

以上就是本期的全数内容咯
格子布景的设备你们都学会了吗
这绝不会是最初一遍教格子布景的
更多关于微信排版的干货教程，可以关注135编辑器公众号（ID：editor135）停止领会

hhhong2017

有没有运营和我一样，看见代码就头疼！
实在公众号文章想要这类格子底纹的布景很简单，有两种快速告竣的方式，不用和复杂的代码打交道~
一、间接套用该公众号的布景款式

怎样套用？像知乎日报这篇文章，我们可以间接收集文章，将图片笔墨删除，只保存布景，随后添补自己的内容即可。


二、利用壹伴的布景款式

除了普通的红色布景之外，格子布景在公众号圈很风行且永不外期。
壹伴的款式中心，除了题目、正文款式之外，还有几十种布景款式，其中就包括格子布景，还有其他都雅的高逼格纹理布景，绝对会满足大师的需求~


看到vip也不用担忧，进入此链接可获得壹伴免费会员
提到款式，不能不向大师保举壹伴的收集款式功用，全网公众号文章的款式你都能收集下来，为自己所用，在收藏夹内间接点击即可秒刷款式！

关于编辑器的更多用法，也许你还想领会
微信公众号自带的编辑器太差，有什么法子可以处理吗？

韭菜555

格子布景”又一次成为很多头部公号的“新宠”，很多公众号图文中都能看到全文格子布景。看起来不但很是精美美妙，布满文艺气味，而且可以突出笔墨内容，减缓读者阅读时的疲惫感。
实在设备的方式很是简单，仅需两步，“文艺范”爆棚的全文格子布景轻松搞定！
一、插入布景图工具进口

文章内容编辑完成后，点击工具栏中“插入布景图”按钮。




二、挑选繁复格子布景
① 挑选布景范例为“图片”，图片挑选为“系统保举”。



② 在弹出的系统保举布景图当挑选第一个布景图，该布景图即为“格子”布景。




③ 挑选布景图后，自动返回上一级菜单。可在右侧“布景结果预览”地区预览增加格子布景后的结果。



三、文章布景图细节调剂

相信仔细的小伙伴已经发现，这样间接增加格子布景后，全文布景图的左右两侧边沿并纷歧致，影响到阅读体验。


接下来仅需要做简单的点窜，就能完善布景图的显现结果。
挑选布景图的对齐方式为“居中”，现在我们能看到格子布景两侧已经连结分歧。点击“完成”，全文格子布景就增加了！


固然，本文中先容的方式，不但适用于增加格子布景，增加全文纯色布景、静态布景、上传自己的图片作为布景图也是可以的！操纵方式类似，可以自行尝试！

穿雨捶

好，朋友圈看到朱玉同学的提问，小通明不敢实名回答。在此献丑回答这个题目。

首先简单分析一下，是一张布景图，找到布景图的地址以下：
http://mmbiz.qpic.cn/mmbiz/yqVAqoZvDibG84oQ3rQ0C1bdcgrh9SZUj1NJvlvFIymN1lfkwH04ib0m11YWt9aeDGQiaLnbx8NibKuCf4XObhSiaQA/0?wx_fmt=png



在chrome中翻开就是这样。
接着我们翻开微信的官方编辑器。

操纵chrome的F12，翻开开辟者选项，检查元素，找到编辑器正文的代码




大要在这。body之下的都是可编辑的内容，然后往里面插入一段html代码。

1. <section
2. class=""
3. style="padding: 10px;
4. background-size: auto;
5. background-image: url(http://mmbiz.qpic.cn/mmbiz/yqVAqoZvDibG84oQ3rQ0C1bdcgrh9SZUj1NJvlvFIymN1lfkwH04ib0m11YWt9aeDGQiaLnbx8NibKuCf4XObhSiaQA/0?wx_fmt=png);
6. box-sizing: border-box;
7. background-position: center center;
8. background-repeat: repeat repeat;"
9. >
10. Hello wolrd!
11. <section>

复制代码

就会出现这样的结果啦。




Q: 理科生怎样操纵？
A:
方式1：间接粘贴复制知乎日报的格式即可。就像这样，间接选中粘贴到编辑器里，把本来的内容删掉再替换自己的内容即可。




方式2：

操纵知乎的编辑器，比如说我这个题目里面，你操纵chrome 右键检查元素，这样。




随意检查一个元素，右键 edit html ,然后把我上面的那段<section.. 代码复制进来，再点一下其他元素。







接着就出现啦！




然后把他粘贴复制到微信的编辑器里面，就搞定啦！

虽然还是很折腾～～可是生命的意义在于折腾呀～

不晓得朱玉蜜斯姐晓得了吗～～
晓得了就给我点个赞吧！
所以朱玉蜜斯姐点赞了就不批评一下吗？


补充：
为了考证我上面的方式，我下面来展现几个例子，供大师参考。
这个是我自己拿PS做的一张布景图：




和上面的方式类似，但有些细节需要调剂而已，这是下面这张图片的插入代码。

1. <p
2. style="padding: 10px;
3. background-size: cover;
4. background-image: url("https://mmbiz.qlogo.cn/mmbiz_jpg/mJgy0Flhx5MImTmdE1J1wuv8HS0CLLoEqGd6eianrPMYiappU73HARFt4zeibQoIxAC9UwuT5V325Ahibvd3hOsKMw/0?wx_fmt=jpeg");
5. box-sizing: border-box;
6. background-position: center center;
7. background-repeat: repeat;
8. text-align: center;"
9. >
10.   发生了什么？我怎样
11. </p>

复制代码

最初实现的结果是这样的。



有空再补点新的布景图~TO BE CONTINUED