开发者社区> FullHouse> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何将宜搭页面一键变灰(自定义页面和表单均适用) R.I.P.

简介: 几行代码快速让页面灰化
+关注继续查看

效果

截屏2022-11-30 下午11.11.35.png

请按你的喜好选择使用。

方案

方案 A:直接拷贝下面这段代码,粘贴到设计器中

{"type":"nodeSchema","componentsMap":{},"componentsTree":[{"componentName":"Html","props":{"content":"<style type=\"text/css\">\n\thtml,\n\tbody {\n\t\tfilter: grayscale(100%) !important;\n\t\t-webkit-filter: grayscale(100%) !important;\n\t\t-webkit-filter: grayscale(1) !important;\n\t}\n</style>","__style__":{},"fieldId":"html_lb3s75cm"},"hidden":false,"title":"","isLocked":false,"condition":true,"conditionGroup":""}]}

方案 B:在动作面板中,通过 JavaScript 实现

(() => {
  const style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `
    html, body {
      filter: grayscale(100%) !important;
      -webkit-filter: grayscale(100%) !important;
      -webkit-filter: grayscale(1) !important;
    }
`;
  document.head.appendChild(style);
})();

image.png

方案 C:在页面样式中写入如下 CSS

页面属性-样式-源码编辑

html,
body {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  -webkit-filter: grayscale(1) !important;
}

image.png

其他方案可以自行在搜索引擎搜索

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
宜搭认证课程-掌握表单设计(二)| 学习笔记
快速学习宜搭认证课程-掌握表单设计。
0 0
宜搭认证课程-掌握表单设计(四)|学习笔记
快速学习宜搭认证课程-掌握表单设计(四)
0 0
宜搭小技巧|一招摆脱纸质表单,数据收集更便捷!
开启「应用公开访问」,组织外成员也可提交数据。
0 0
宜搭6月继续推出新功能:子表单功能升级及新增关联列表
钉钉宜搭最新升级子表单功能、新增关联列表功能,子表单主要针对数据量、子表填写页、子表详情页和数据管理页的升级。
0 0
钉钉宜搭全命题解析 | 学习笔记
快速学习钉钉宜搭全命题解析
0 0
4.1 钉钉宜搭大屏介绍|学习笔记
快速学习4.1 钉钉宜搭大屏介绍
0 0
初识钉钉宜搭低代码 | 学习笔记
快速学习初识钉钉宜搭低代码,介绍了初识钉钉宜搭低代码系统机制, 以及在实际应用过程中如何使用。
0 0
+关注
FullHouse
这个家伙很懒,什么都没有留下...
文章
问答
来源圈子
更多
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
+ 订阅
相关文档:
文章排行榜
最热
最新
相关电子书
更多
低代码开发师-宜搭
立即下载
基于低代码平台钉钉宜搭的工程项目管理实践
立即下载
宜搭 - 企业智能化应用搭建平台
立即下载