如何设定网站背景? – 创作者学苑

最后编辑于 2020-05-22
270 53 551

虽然以白色为主体的网站十分简单时尚,但如果站长觉得外观太过简单,就可以设置WordPress背景图片!设置背景图像或是对其自定义需要的颜色,网站的气氛就会立刻发生改变。本篇将介绍网站在电脑版(PC)时的效果,有兴趣的站长可以参考看看~

Table of Contents

网站背景设定方法我的主题能不能设定背景?如何设置背景颜色?如何设置背景图片?使用重複图案的好处布局对底图选择的影响全宽布局盒装布局卡片布局设定网站背景该注意什幺?留意图档的大小总结和注意事项网站背景设定方法

由于并非每一个版型都适合设定背景,因此有些主题只能设定底色,或是不提供设定喔!

我的主题能不能设定背景?

于网站后台>>外观,如果有提供「背景」,即可点选移动至设定画面。

如何设置背景颜色?

点选「选取色彩」后,除了操作调色盘,站长也可以直接输入需要的色码,颜色可以参考这篇:免费线上选色工具 。

如何设置背景图片?

与背景颜色位置相同,选择「选取图片」后会进入设定画面。

于预设集设定图片展示方式

默认值:垂直和水平显示重複的图像填满画面:将图片根据屏幕尺寸进行调整符合画面:图像延展至全屏显示重複:适用于小图案,可将图案重複展示自定义:可进行自订选项

自订选项说明

图片位置:设定图片对齐画面方式图片尺寸:图片展示尺寸重複背景图片:适用于小图案,可将图案重複展示随页面捲动:打勾此选项,当画面往下移动时,图片会同时往下移动,使背景保持在相同位置使用重複图案的好处

使用重複的图案,可以减少访客需要载入的资源,有时候一张纹理甚至不会超过 30KB!

可以只用一张小图,就完成画面的填充~

布局对底图选择的影响

因主题的布局不同,不一定适合所有的背景图片素材,常见的布局方式有:

全宽布局

全宽度布局只适合极为素面的底图或设定颜色,因为会影响读者浏览,如果图案纹路明显…

换成些微皱褶的底图,可以发现这类纹路不明显或只设定底色会相对容易阅读

盒装布局

盒装布局适合多数调整方式,因为主内容区块为一体,并与底色分开,例如使用重複的图案!

或鲜豔的底图

卡片布局

卡片布局不适合细密与鲜豔的图案,这会让画面变得很有压迫感又杂乱!

选择比较不明显的图案

设定网站背景该注意什幺?留意图档的大小

如果要使用一张大图(通常是照片),需要留意图档大小,如果你的图档有10MB,读者的就必须下载 10MB的资料量

总结和注意事项

为了达到无缝效果,需要使用纹理可以衔接的图片,可以搜寻:シームレスなテクスチャ、Seamless pattern

这些背景材料站点,包含许多非常实用的材料。使用材料时,请务必检查版权和许可。在多数情况下,可以自由使用,但是存在一些需要留意的地方,例如:「可商业利用」与「在商业用途上,必须将作者标记放在某个位置」需要仔细分别。

※  toptal 
※ pattern8
※ backgroundlabs
※ フリーテクスチャ素材馆
※ dinpattern
※ pattern
※ bg-patterns
※ 日本的艺术社群  pixiv:综合001、点纹理2、免费378、免费379、点63、免费材料30、自由纹理09、咖啡馆

背景布局图案网站图片画面重複设置颜色


上一篇: 下一篇:
你可能还喜欢以下内容