模糊和玻璃着色控制
Blur Value从0到100px运行,从20px开始 背景颜色设置玻璃的色调:选择RGBA颜色并降低其不透明度,因此后面的内容仍然显示通过。边界半径以px,%或em圆角,边界宽度添加细的,半透明的白色边缘,最高可达10px。
- 模糊值从 0 到 100px,默认情况下为 20px。
- RGBA背景颜色为色调。一个HEX或RGB颜色转换为30%不透明度为你。
- 每个角的边框半径,加上 0 到 10px 的玻璃边缘。
修复模糊不显示时的溢出
CSS背景-过滤器属性中产生模煳,而溢出:隐藏是它丢失的最常见原因,Fix溢出开关将元素的溢出设置为可见,因此无需打开样式表即可修复。
- Glassmorphism 面板中的一个开关,无自定义 CSS。
- 效果亮起但看起来没有什么模糊时使用它。
- 还要检查元素是否位于照片、渐变或其他繁忙的背景上。在纯白色上没有什么可模糊的。
玻璃态 CSS 与玻璃态扩展
Elementor的CSS滤镜模煳了元素本身, 包含文字一张玻璃卡需要背景滤镜代替, 只模煳了元素后面的东西, Elementor对其没有控制权, 手写,CSS长这样:
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| 手写CSS | 玻璃态扩展 | |
|---|---|---|
| 你在哪里设置的 | 自定义 CSS 字段或您的样式表 | "高级"选项卡中的控件 |
| 野生动物园前缀 | 添加 -webkit-backdrop-filter 自己 | 包含 |
| HEX 或 RGB 颜色 | 除非添加不透明度,否则保持坚固 | 转换为 30% 不透明度 |
| 被溢出阻挡的模糊:隐藏 | 自己找到并覆盖它 | 修复溢出开关 |
| 作品上 | 无论您的选择器针对什么目标 | 小部件、柱、部分和容器 |
backdrop-filter 在当前的 Chrome、Edge、Safari 和 Firefox 中工作。较旧的浏览器显示半透明背景,而不会出现模糊。玻璃在移动或颜色上看起来最好,因此请在上面尝试一下 颗粒 或者一个 动画梯度背景 (Pro)。面板不涵盖的效果,添加您自己的规则与 自定义CSS.
玻璃态常问问题
为什么我的模糊效果没有显示出来?
Glassmorphism面板中打开Fix溢出。它将元素的溢出设置为可见,因此背景过滤器可以工作。还确保元素后面有一个图像或一个彩色背景。
我可以使用带有玻璃效果的纯色吗?
Yes。HEX或RGB颜色转换为RGBA,不透明度为30%,因此玻璃保持透视,为了精确控制,选择一个RGBA颜色,并自行设置不透明度。
它适用于任何主题吗?
是。Elementor元素上设置了效果,因此它可以与运行Elementor的任何主题一起工作。访问者需要一个支持背景过滤器的浏览器,它涵盖了当前版本的Chrome、Edge、Safari和Firefox。
Glassmorphism 扩展是免费的吗?
是。Glassmorphism是Elementor的主插件中的免费扩展之一。在主插件仪表板中打开它,它会显示在每个元素的高级选项卡上。
探索更多功能,构建更快、设计更智能
为什么要停止一种效果?Master Addons 套件提供了您需要的其他一切:独特的小部件、更深入的定制以及无缝协同工作的专用工具。将 Elementor 打造成为您的终极设计强国。
