有位笔友，送来了一个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是字段的结束）即可，然后填上您的文字或者字段。
就是这样！大功告成。
