在 WordPress 中如何实现在图片上添加文字(转)

转蒋老师文章在 WordPress 中实现图片上加文字。这样的话,可以避免每次都要用工具处理图片再上传,也能减少空间的压力,加快浏览速度。本文介绍的就是在图片上添加文字的办法。

  先看演示效果:
《在 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 是字段的结束)即可,然后填上你要的文字或者字段。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您必须启用 javascript 在这里查看验证码!

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据