file

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

演示效果:

据人民网山东频道报道称:

1 月 31 日下午,中国电信在深圳圆满完成央视春晚特别节目现场连线直播。
这是走过 36 年的央视春晚,第一次实现 VR 超高清视频内容的 5G 传输,也是央视第一次用 5G 网络进行 VR 春晚节目直播。

根据实测结果,端到端时延小于 50 毫秒,远远优于测试指标要求。

代码:

<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 是字段的结束)即可,然后填上你要的文字或者字段。

人已赞赏
wordpresswordpress插件

Wordprss插件Divi Supreme至尊专业版 Divi Supreme Pro v4.5.4

2021-7-4 13:21:56

typecho主题主题推荐

initial - 极简风格Typecho博客主题模版

2020-11-30 13:37:30

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索