有赞新零售社区

发帖
会员俱乐部»熙语说· 10月24日-教程 | 背景图上写字这么装逼的技能

[每日熙语说] 熙语说· 10月24日-教程 | 背景图上写字这么装逼的技能

有赞-熙语 2016-10-25 2245 浏览 0 评论 | 只看楼主 [打印]


昨天看到i排版示例里展示了一个新装逼的小技巧,很受追捧。今天就给大家一个1分钟掌握上手的小教程。

先来看看此技能;在背景图上编辑文字,并且背景图会随文字的不停添加一直延展。
(为了展示效果,GIF图展示中老沙用空格代替输入文字)


▌首先,大家先记住一段代码,之后的效果需要复制粘贴它来实现



<section style="display: block; width:20em; vertical-align: top;box-sizing:border-box;background-image:url(http://cdn.duitang.com/uploads/i ... 22120309_HBLZE.jpeg);background-attachment:scroll;background-size:100%;background-position: 0% 0%;background-repeat: no-repeat;" class="">
<p >

❶ 打开i排版(iPaiban.com),进入编辑页面,点击右上角的HTML格式。


❷ 将下方代码粘贴进去,再点HTML格式。你就会看到是下面这样的效果

注:
1.只有代码像下方蓝色框中这样的显示,才证明是有效代码。
2.如果再复制粘贴过程中多出了下方蓝色框中代码之外的任何字符请删除。



❸ 输入要编辑的文字,图片会自动展开。
注:如果文字不多时,可以用空格来将图片全部展开



▌二、替换背景图



<section style="display: block; width:20em; vertical-align: top;box-sizing:border-box;background-image:url(http://cdn.duitang.com/uploads/i ... 22120309_HBLZE.jpeg);background-attachment:scroll;background-size:100%;background-position: 0% 0%;background-repeat: no-repeat;" class="">
<p >

❶ 点击HTML,将上方代码中,括号内红色的图片地址部分替换成你要使用的背景图地址即可,如图所示:


❷ 再次点击HTML,回到编辑状态,可以看到图片已经替换成功。


让我们来看看在手机上的效果


三、选择你喜欢的样式,将背景图添加进去



在i排版(iPaiban.com)样式中心选择适合放背景图的样式
➜付费模板、付费样式、秋季、卡片、图文样式都比较适合。


并且这些样式都是支持变换样式的边框、背景颜色。
发挥自己的脑洞,玩坏i排版(iPaiban.com)样式。

让我们来看看加过样式之后的效果:


四、需要注意的地方



❶ 图片和输入文字时在编辑器里不可以全屏显示和输入?
答:不影响在手机里的显示。原因是代码中设置了自适应手机屏幕大小。

❷ 由于需要输入文字的原因,建议背景图选择纯色或者白底、简单图案的。

❸ 背景图上的文字请根据图片底色选择有色差的颜色,以便文字显示的更清晰:
例:使用亮色、深色背景图将字变为白色;白色背景图文字为黑色等

❹ 替换图片时候注意,一定是替换代码中红色标出的括号内的部分,不可丢掉括号。

❺ 添加背景图都样式里时请使用:Ctrl+A全选,Ctrl+C复制,到微信后台Ctrl+V粘贴

❻ 根据背景图上的图案将文字选择居左、中、右。




今天是学习计划第109天~这样一个能添加文字且可以放在各种样式里的背景图就做好了,你学会了吗?
我想已经迫不及待的要试一下了,那就展示给更多的小伙伴吧!




用手机打开
收藏 ··· 回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    复制链接
    新浪微博
    QQ空间
    微信扫码
    • 回复

    • 评分

    客服工作时间是9:00-18:00,客服妹子当前不在线,若不能及时回复请谅解。试试右上角的搜索吧,论坛有丰富的经验贴、公告贴,相信一定能够帮到您~

    复制成功