Semantic-UI 图像标题内容

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

Semantic-UI header 提供了一个简短的内容摘要，它可以包含 3 个内容 Image、Icon 和 Subheader。 Semantic-UI Content 组件很重要，就像没有标题/摘要一样，内容查找过程会浪费很多时间。在本文中，我们现在将介绍图像内容。

语义 UI 标题图像内容类：

• image ：此类用于将图像包含在标题中。

语法：可以操纵图像的形状和大小

下面的示例说明了语义 UI 标题图像内容：

示例 1：在此示例中，我们将附加图像作为圆形的标题内容。

HTML

  

   
   

  


    

    GeeksforGeeks
    
    
    Semantic-UI Header Image Content
    




    
    Geeksforgeeks:
    
    
    

        Free Tutorials, Millions of Articles, Live,
        Online and Classroom Courses ,Frequent Coding
        Competitions ,Webinars by Industry Experts,
        Internship opportunities and Job Opportunities.
    
  


  

输出：

语义 UI 标题图像内容

示例 2：在此示例中，我们将附加图像作为方形标题内容。

HTML

  

    
    

  


    

    GeeksforGeeks
    
    
    Semantic-UI Header Image Content
    




    
    Geeksforgeeks:
    
    
    

        Free Tutorials, Millions of Articles, Live,
        Online and Classroom Courses ,Frequent Coding
        Competitions ,Webinars by Industry Experts,
        Internship opportunities and Job Opportunities.
    
  


  

输出：

语义 UI 标题图像内容

参考： https ://semantic-ui.com/elements/header.html#image