Semantic-UI 倒置调光器变体

Semantic UI是一个现代框架，用于为网站开发无缝设计。它为用户提供了轻量级的组件体验。它使用预定义的 CSS 和 jQuery 来整合不同的框架。

Semantic UI Dimmer 用于隐藏干扰或网站内容并将焦点移至主要内容。它可用于查看重要的更新或通知。 Semantic UI Inverted Dimmer Variation 用于反转调光器的颜色。调光器内部的颜色也反转了。

Semantic UI Inverted Dimmer Variation 类：

• 反转：此类将反转调光器的颜色。

语法：将反转类添加到调光器，如下所示：

    ...

示例：在以下示例中，我们在容器上安装了一个倒置调光器。

HTML

  
    
    
    
    
    
    
    
    
    
      .icon {
        margin: 16px;
      }
    
  
  
  
    
      
        
          
            GeeksforGeeks
          
        
        
          Semantic UI Inverted Dimmer Variation
        
      
  
      
        
          
            
              Welcome to GeeksforGeeks
            
  
            
            
              Hide
            
          
        
        
          Welcome to GeeksforGeeks
          Find the best programming tutorials here.
  
          
            Show
          
        
      
    
    
      const showDimmer = () => {
        $('#gfgdimmer').dimmer('show')
      }
      const hideDimmer = () => {
        $('#gfgdimmer').dimmer('hide')
      }
    
  

输出

Semantic-UI 倒置调光器变体

参考： https ://semantic-ui.com/modules/dimmer.html#inverted-dimmer