WordPress:如同FB上的底图上添加文字的代码

有位笔友,送来了一个FB脸书的截图:一张图片上加上一段文字。问我:Wordpress发文,可以达到这样的效果吗?条件是:不是事前把图文制作好了——制作成了图片再发上去。

我明白他的要求。我没有FB脸书面簿账号,不知道FB版面上是如何制作的。但是,凭借我这几年应用Wordpress的经验,这样的效果图——不难。

不必事前制作为图片,通过简单的代码,可以实现这样的效果。当然,不过还是要有一张原始的背景图(不必添加任何文字)。

不信?

有图有真相:

闪小说:

2017年11月15日各大媒体网站头条新闻:
今早两列地铁列车,在欲睏站尾随相撞,造成28人受伤送院。

新闻处理局过后宣布:上述新闻是假新闻,要罚。

[php]

<div style="background-image: url('http://www.mycllab.com/wp-content/uploads/2017/11/wallpaper-fire-red-and-blue-digital-1.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%;">
2017年11月15日各大媒体网站头条新闻:
今早两列地铁列车,在欲睏站尾随相撞,造成28人受伤送院。
</p>
<p style="color: white; width: 90%; padding: 50px 0px 50px 50px; text-align: center; font-size: 150%;">
新闻处理局过后宣布:上述新闻是假新闻,要罚。
</p>
</div>

[/php]

解释代码:

1. 先上传一张背景图上Wordpress的媒体库里。复制这张图片在媒体库的代码。如:http://www.mycllab.com/wp-content/uploads/2017/11/wallpaper-fire-red-and-blue-digital-1.jpg。然后把这个图片链接地址粘贴在上述代码的那个http链接处替代我的那个图片链接。
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是字段的结束)即可,然后填上您的文字或者字段。

就是这样!大功告成。

相关文章

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