图片叠加切换代码(图片叠加合成)

图文排版

H5

手机版秀米

小伙伴们，今天周三啦

又到了介绍新功能的时间

不知道大家对

秀米边框、间距的操作习惯了没

有没有感受到编辑区无遮挡的快乐

如果有，快乐会继续↓

这次我们把 阴影菜单也挪到了左边

包括 布局阴影、 图片阴影、 文字阴影

除了 编辑区无遮挡

现在布局阴影、图片阴影能 直接添加多层阴影

再也不用一层又一层套布局啦

如果没有，请往下看

真的超级好用的阴影设置新界面

01

阴影设置新界面

秀米阴影设置，分别有布局阴影、图片阴影以及文字阴影，跟间距、边框一样，单独拉出来做成左侧菜单：

布局的阴影设置界面

1

在左边调整数值时，编辑区无遮挡

当在左边操作阴影设置，右边编辑的内容会相应显示阴影效果；并且在操作过程中，工具条会暂时消失，编辑界面无任何遮挡：

在设置阴影时，工具条会暂时消失

需要注意的是， 布局、图片设置阴影，要保证布局、图片的宽度在100%内，设置的阴影不会被裁切掉。

2

布局/图片可以直接套多层阴影

设置好一层阴影后，可以点击添加阴影，直接再添加多层阴影：

布局/图片阴影可以直接设置多层

大致了解阴影界面操作后，现在我们来看下具体的布局、图片、文字是如何设置阴影的吧：

02

布局阴影的设置

设置布局阴影，基本就是设置水平偏移、垂直偏移、阴影模糊度、阴影范围、阴影颜色；介于布局的独特性，可以切换外部阴影、内部阴影选项。

布局的阴影设置界面

1

设置布局的阴影

首先需要注意的是， 布局阴影，要保证布局宽度在100%内，设置的阴影不会被裁切掉；而具体的宽度数值，需要根据阴影数值来算，保证阴影不会被裁切掉的宽度就是合适的。

选中布局，点击工具条上的阴影，在左边界面直接拖动滑块来设置阴影，也可以输入数值。

比如，先来设置 布局的水平偏移、垂直偏移；数值正负值皆可：

设置布局阴影水平/垂直偏移

阴影模糊度，就是在设置水平/垂直偏移后，让阴影变模糊， 数值只能为正数； 数值越大， 模糊度越高：

设置布局阴影的模糊度

阴影范围，是基于 阴影水平/垂直偏移数值存在的，当阴影范围数值为 正数时，会与水平/垂直数值 相加；为负数时，会与水平/垂直数值 相减：

阴影范围为正数时，会与水平/垂直数值相加

阴影范围为负数时，会与水平/垂直数值相减

内部阴影，就是会有个 凹进去的阴影效果，一般设置小数值的水平/垂直偏移，配合阴影模糊度，会好看些：

布局的内部阴影设置

2

布局添加多层阴影操作

在阴影设置界面，点击添加阴影，然后继续设置新的一层阴影，数值正负值可以与第一层相反，这样就可以获得四边都有阴影效果：

布局再添加一层外部阴影设置

如果切换到内部阴影上，就会与第一层阴影相叠加：

布局第二层阴影，切换至内部阴影设置

3

删除布局阴影

在布局阴影设置界面，偏右上角有一个删除按钮；如果有 多层阴影，会 直接删除阴影层；如果 只有一层阴影，只会 删除掉阴影数值：

删除布局阴影设置操作

03

图片阴影的设置

图片阴影，与布局阴影设置差不多，都能设置水平偏移、垂直偏移、阴影模糊度、阴影范围、阴影颜色；也能添加多层阴影、删减阴影层。

唯一的区别， 图片只能设置外部阴影，没有内部阴影选项：

图片的阴影菜单页面

图片阴影，要保证图片宽度在100%内，设置的阴影不会被裁切掉；而具体的宽度数值，需要根据阴影数值来算，保证阴影不会被裁切掉的宽度就是合适的。

1

设置图片阴影

选中图片，点击工具条上的阴影，左边弹出阴影菜单后，给图片设置合适的阴影：水平/垂直偏移、阴影模糊度、阴影范围、颜色，自己把握着来：

设置图片阴影

2

添加/删减阴影层

图片的第一层阴影设置好，点击下面的添加阴影，会新增一层阴影菜单，直接拖动滑块或输入数值：

图片添加多层阴影

设置好的阴影也可以直接删除，点击阴影设置页面右上角的删除按钮，多层阴影直接删除，单层阴影是删除设置的数值：

删除图片阴影设置

04

文字阴影的设置

文字阴影设置，是在文字工具条→文字颜色右边小三角→文字阴影，然后左边会弹出文字阴影的菜单页面。

文字阴影可以设置水平偏移、阴影偏移、阴影模糊度、阴影颜色；能添加多层阴影，也可以删除：

文字阴影设置菜单页面

1

设置文字阴影

选中文字，在工具条上条点击文字阴影，左边弹出文字阴影菜单，开始给文字设置合适的阴影吧。

一般来说，设置好水平/垂直偏移，拉一下文字模糊度，加上合适的颜色，都会比较好看：

给文字设置一层阴影

2

添加多层文字阴影

文字也可以设置多层阴影，点击添加阴影，然后继续给文字设置新一层阴影：

文字设置多层阴影操作

另外，我们可以通过添加多层阴影，做出描边文字、空心描边、立体文字这些，如果有兴趣，可以在左边模板素材区→图片模板→标题→基础标题里找找看，了解一下描边文字的做法：

3

删除文字阴影层

删除文字阴影层，仍旧遵循多层阴影直接删除，单层阴影删除数据原则：

删除文字阴影操作

小结

秀米布局、图片、文字的阴影设置，操作页面放在了左边，方便操作，不会被工具条遮挡。

阴影可以拖动滑块、输入数值来设置，拖动滑块更容易看出细微变化，除阴影模糊度只能设置正数值，其他水平偏移、垂直偏移、阴影范围都可以设置正负数值。

现在布局、图片都可以直接添加多层阴影，不用套一层层布局来做；删除阴影，如果是多层会直接删除，单层阴影直接删除设置的数据以及颜色。

阴影设置的宽度，最好要保证在编辑区里可见，不要超出编辑区范围；也就是说布局、图片的宽度要在小于100%宽度。

更多阅读

小白适用

系统介绍秀米的基础操作

☚☚☚ 向左滑动

秀米有那么多骚技能

不来学几招？

秀米每一天都是最新的

你的 在看也是最新滴~