当前位置:首页 > 网站建设 > 正文内容

html点击文字弹出图片(html点击文字弹出图片窗口)

网站建设10个月前 (01-10)329

图文排版

H5

手机版秀米

小伙伴们,今天周三啦

又到了介绍新功能的时间

不知道大家对

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

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

如果有,快乐会继续↓

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

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

除了 编辑区无遮挡

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

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

如果没有,请往下看

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

展开全文

01

阴影设置新界面

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

布局的阴影设置界面

1

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

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

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

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

2

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

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

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

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

02

布局阴影的设置

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

布局的阴影设置界面

1

设置布局的阴影

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

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

比如,先来设置 布局的水平偏移、垂直偏移;数值正负值皆可:

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

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

设置布局阴影的模糊度

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

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

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

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

布局的内部阴影设置

2

布局添加多层阴影操作

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

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

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

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

3

删除布局阴影

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

删除布局阴影设置操作

03

图片阴影的设置

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

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

图片的阴影菜单页面

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

1

设置图片阴影

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

设置图片阴影

2

添加/删减阴影层

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

图片添加多层阴影

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

删除图片阴影设置

04

文字阴影的设置

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

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

文字阴影设置菜单页面

1

设置文字阴影

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

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

给文字设置一层阴影

2

添加多层文字阴影

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

文字设置多层阴影操作

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

html点击文字弹出图片(html点击文字弹出图片窗口)

3

删除文字阴影层

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

删除文字阴影操作

小结

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

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

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

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

更多阅读

小白适用

系统介绍秀米的基础操作

☚☚☚ 向左滑动

秀米有那么多骚技能

不来学几招?

秀米每一天都是最新的

你的 在看也是最新滴~

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://muyuzhen.com/post/78177.html

分享给朋友:

“html点击文字弹出图片(html点击文字弹出图片窗口)” 的相关文章

石家庄网站制作(石家庄网站制作)

石家庄网站制作(石家庄网站制作)

本篇文章给大家谈谈石家庄网站制作,以及石家庄网站制作对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、石家庄网站制作公司哪家好? 2、石家庄网站建设哪家比较好呢? 3、石家庄网站建设价格是多少?我想做个门户网站的话,建设多少钱? 4、石家庄网站建设,制作网站的时...

桂林网站优化(桂平网站优化)

桂林网站优化(桂平网站优化)

本篇文章给大家谈谈桂林网站优化,以及桂平网站优化对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、桂林网站优化流程是什么样的? 2、找最专业的网络推广公司? 3、桂林seo:网站URL如何做优化 4、寻找SEO高手,最好是南京的。 桂林网站优化流程是什么样的?...

熊猫办公ppt模板下载免费(熊猫办公ppt模板下载免费版)

熊猫办公ppt模板下载免费(熊猫办公ppt模板下载免费版)

今天给各位分享熊猫办公ppt模板下载免费的知识,其中也会对熊猫办公ppt模板下载免费版进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、谁有熊猫办公PPT的下载会员么,请帮下载一个PPT,感谢了! 2、跪求一个熊猫办公的ppt模板网站的vip的号,快到年底...

彩虹云商城下载手机版(彩虹云商城下载手机版安装)

彩虹云商城下载手机版(彩虹云商城下载手机版安装)

本篇文章给大家谈谈彩虹云商城下载手机版,以及彩虹云商城下载手机版安装对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、彩虹云商城抽奖怎么设置 2、彩虹发卡系统怎么变成黑白的 3、小储云商城和彩虹系统哪个好 4、彩虹社区属于什么系统? 5、彩虹云商城和沉梦哪个...

设计开发任务书模板(设计任务书模版)

设计开发任务书模板(设计任务书模版)

本篇文章给大家谈谈设计开发任务书模板,以及设计任务书模版对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、学生信息管理系统程序设计的需求分析的大概内容和格式 2、技术合同的特征是什么? 3、项目管理计划应该包括哪些内容 学生信息管理系统程序设计的需求分析的大概内容...

招聘服务员信息模板最新(招聘服务员信息模板文字)

招聘服务员信息模板最新(招聘服务员信息模板文字)

本篇文章给大家谈谈招聘服务员信息模板最新,以及招聘服务员信息模板文字对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、星瑞美丽华酒店招聘在几楼 2、服务员辞职信怎么写? 3、银行餐厅当服务员好吗 4、酒吧一直高薪招男女服务员是真的吗? 5、网上招聘说自己不想...