Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 来构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可以用来使您的网站看起来更神奇。它使用一个类向元素添加 CSS。
调光器隐藏分心以将注意力集中在特定内容上，它会使它变暗。
示例 1：
此示例在悬停时显示调光效果。
为此，您需要 jQuery 代码。
$('.image').dimmer({
on: 'hover'
});
完整代码：
Semantic UI
Geeksforgeeks
Go on site
输出： 
示例 2：
此示例在按钮单击时显示调光效果。
jQuery代码：
$('.dim').click(function() {$('.image').dimmer('show')});
$('.show').click(function() {$('.image').dimmer('hide')});
dim和show是两个按钮的类。
完整代码：
Semantic UI
Geeksforgeeks
Go on site
输出： 
示例 3：
此示例显示模糊调光器效果。
Semantic UI
Geeksforgeeks
Go on site
输出： 
示例 4：
此示例创建倒置调光器效果。
Semantic UI
Geeksforgeeks
Go on site
输出： 