转蒋老师文章在 WordPress 中实现图片上加文字。这样的话，可以避免每次都要用工具处理图片再上传，也能减少空间的压力，加快浏览速度。本文介绍的就是在图片上添加文字的办法。
先看演示效果：
<div style="background-image: url('https://images.havetosay.com/5G-stn-2019.jpg'); background-repeat: no-repeat; height: 100%; width: 100%; margin-top: 20px;">
<h1 style="color: white; width: 90%; padding: 50px 0px 50px 50px;">据人民网山东频道报道称：</h1>
<p style="color: yellow; width: 90%; padding: 50px 0px 50px 50px; font-size: 150%;">
1 月 31 日下午，中国电信在深圳圆满完成央视春晚特别节目现场连线直播。
这是走过 36 年的央视春晚，第一次实现 VR 超高清视频内容的 5G 传输，也是央视第一次用 5G 网络进行 VR 春晚节目直播。
</p>
<p style="color: white; width: 90%; padding: 50px 0px 50px 50px; text-align: center; font-size: 150%;">
根据实测结果，端到端时延小于 50 毫秒，远远优于测试指标要求。
</p>
</div>
代码使用说明：
1. 先上传一张背景图片，然后把图片的地址粘贴在上面的代码中，替代示例中的图片链接。
2. h1 的代码，是第一部分文字，文字居左，我直接用 WordPress 的标题来处理。你也可以依样画葫芦，输入您的标题。如果没有文字，可以删除这一行的文字，将其设置为空行。
3. 第一个 p 段：是第二部分的文字，文字居左，我把它处理为段落字段。文字设置为：黄色（yellow）。你可以根据背景图将其修改为其他颜色。里面的 padding 代码，是指文字的上下左右的间距。这里我设置为：上：50px，右：0px，下：50px，左：50px。php 代码对位置的设置的规则是：上-右-下-左，每个设置空一格。字体大小我设置为原来字体的 150%，即：比原来字体大一半。
4. 第二个 p 段：是第三部分的文字，文字居中，我把它处理为段落字段。文字居中的代码是：text-align，设置为 center。也就是居中。如果你要让它居右，可以把 center 改为 right。当然，如果要居左，就改为 left。也可以不写，就算你把整个 text-align 删除也可以。不写的话是不会设置的，这里会依照原来的设定：居左。文字设置为：白色（white）。你也可以随意修改你喜欢的颜色。
5. 代码里的 width，是指宽度，你也可以根据需要调整。
6. 如果还需要添加段落，可以依样画葫芦，复制整段 p 段代码（p 是字段的开始。/p 是字段的结束）即可，然后填上你要的文字或者字段。
文章评论