如何对酷屏更改背景颜色、图片、渐变

1582
0

前端小姐姐 小试身手Lv3

发表于2019-11-21 09:58

楼主
本帖最后由 前端小姐姐 于 2019-11-21 10:01 编辑

1、酷屏整体:
① 更改背景颜色:
在右边点击展开按钮,在基础属性里点击颜色拾取后可以选择颜色 也可以自己输入对应的颜色值

② 更改背景图片:
可以上传图片 也可以选择库里已有的图片
图片大小和上图(绿色框框)分辨率大小保持一致
或者图片选一张任意大小可叠加的图片 勾选上上图(蓝色框框)的平铺

③ 更改背景颜色渐变:
点击代码后 让红框框内更改成
background: linear-gradient(to bottom, #00aeff, #596efb);
保存就可以实现背景颜色渐变 记得不要添加右侧基础属性的背景颜色 背景图片 不然会覆盖掉代码
预览结果如下:
其中to bottom是向下渐变,改变渐变方向用right,left,top
还可用角度实现渐变
等价于上边的效果:background: linear-gradient(90deg,#dcaf66 0,#75361c 100%);
*其实如果会代码,也可以自己尝试在代码区去更改代码,实现自己想要的效果


2、单个酷屏组件:
有些酷屏组件没有可直接更改颜色、渐变、图片的,就需要我们去代码区更改代码去实现。判断酷屏组件是否可以直接更改颜色、渐变、图片,可以在右侧基础属性区查看是否有可填的选项(如下图)

① 更改背景颜色
和上边酷屏整体背景颜色的更改一样,如下图直接改对应选项

② 更改背景图片
和上边酷屏整体背景图片的更改一样,如下图直接改对应选项

③ 更改背景颜色渐变
和上边酷屏整体背景颜色渐变的更改一样,在代码区更改代码

最近看过此主题的会员

wxw

mske_js

zhaolj

咏之

18715311272

lii_chen1234

槐序

adhzh

小亿

Yuuuu

429661127

0个回答

只看楼主

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

400咨询:400-0011-866

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号