关于在首页如何使左右端背景图固定,特回复邵同学

昨天发布的淘宝店铺固定背景的日志很多朋友看了,其中收到邵同学的留言,说还有部分不明白。

淘宝店铺到底应该如何使左右两边的背景固定

淘宝店铺到底应该如何使左右两边的背景固定

今天特重新梳理了一下。使左右两边的背景固定,用的店铺其实也不多,大多数的店铺还是使用整个固定背景图。所以大部分的朋友们其实可以完全不用去理会怎么去弄,对这方面有兴趣的想了解的可以看一下。

一般的淘宝店铺首页装修如下:

普通淘宝店铺首页装修页面

普通淘宝店铺首页装修页面

使用的是固定背景图(1920px*1080px)

典型的淘宝店铺首页分析

典型的淘宝店铺首页分析

整个的固定背景尺寸为1920*1080px,自定义模块一,自定义模块二在这个店铺里边和的图片是1920px,当然你也可以950px,甚至这么说,有了盛夏科技, 我们已经早就可以没有多少尺寸的限制了,这个限制是淘宝装修里边的模块给的,但是使用盛夏科技可以突破。比如下面的店铺首页,站长pedro就使用了多种尺寸,你可以了解到其实没什么关系,只是美观程度不怎么样。而且下面的店铺就使用了左右固定背景,而不是前面的店铺的整个固定背景。

使用盛夏科技突破1920或者950限制

使用盛夏科技突破1920或者950限制

请注意上面的上面的图片模块,居然图片的水平方向为1905px,完全不再是什么950或者是1920px,但是请注间上图中,其实我使用了左右固定背景,乙基麦牙酚那张图片,因为比较大,所以盖住了我的固定背景,也就是说左右固定背景也好,还是整个的固定背景也好,听这名字,就意味首固定背景是在其他图层的后面的。是会被挡的。所以如果不想被挡,应该怎么办?左右固定背景,其实是一个1920px*1080px的图片,只有左右对称的两边有文字图片内容,中间是一片空白,空白区域放一张正好这么大的图片,那么不是就不会被挡了吗?上图中写有开口器字样的图片就没有挡住左右背景,左右背景就完全出来了。如下图:

950在固定背景的中间

950在固定背景的中间

 

 

另外还有一种情况就是借助PNG图片,就算你的自定义模块的图片是1920px,也不会挡住固定背景呢,只要把左右固定背景要写字的地方,放一张你的图片,这张图片是png格式的,左右两边是透明区域,那么就挡不住了。要了解这点,就要了解png格式的含义,png格式的特别之处就是可以有透明的图片区域,有马赛克的区块就是透明的。

如下面这张图片:

店铺装修中深入了解png格式的含义

店铺装修中深入了解png格式的含义

请注意被选中的图片模块中的图片可是1920px,怎么没有像最上方那张1905px像素宽的图片一样挡住我们的左右固定背景呢?那么你只要再看一下我使用到的这张图片就知道了:

ng图片的效果

ng图片的效果

这样描述下来,是不是知道怎么去制作左右固定背景图了呢?

接下来,我详细的教一下,在店铺装修中怎么使左右背景固定:

固定背景图在图片空间的上传

固定背景图在图片空间的上传

点如图示位置获取图片的存贮地址后,编辑导航条如下图:

注意如何编辑导航条的

注意如何编辑导航条的

然后点显示设置,粘贴下面的一段代码进去

body{background-image:url(你的图片地址);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}

如下图:

粘贴一段固定格式的代码进去

粘贴一段固定格式的代码进去

选择你的图片地址这几个字之后点粘贴如下图:

粘贴图片的地址

粘贴图片的地址

之后会显示如下图点确定:

点确定按钮

点确定按钮

大功告成,点发布就行了,简单不简单?

首页装修发布

首页装修发布

 

 

 

未经允许不得转载:兴化英语钢琴女孩,兴化英法葡语,兴化一级建造师造价师 » 关于在首页如何使左右端背景图固定,特回复邵同学

赞 (1)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册
切换注册

登录

忘记密码 ?

切换登录

注册