如何使用 HTML 和 CSS 创建英雄图像？

可以使用 HTML 和 CSS 设计英雄图像。本文包含两个部分。第一部分附上图片并设计基本结构。第二部分设计图像和图像上的文字。当您将其用作横幅时，英雄形象看起来很有吸引力。假设您想通知其他人您新添加的功能，那么继续使用这些功能将是最好的程序。

创建结构：

在本节中，我们将为英雄图像封面图片创建基本结构。我们将附加图像并在下一节中放置将放置在图像上的文本。

HTML 代码： HTML 代码用于创建英雄图像的结构。由于它不包含 CSS，所以它只是一个简单的结构。我们将使用一些 CSS 属性使其具有吸引力。

HTML



 

    Create a hero image

 

    
             
        
        
 
        
        
             
            GeeksforGeeks
             
A Computer Science Portal for Geeks

HTML



 

    Create a hero image
     
    

 

    
             
        
        
 
        
        
             
            GeeksforGeeks
             
A Computer Science Portal for Geeks

设计结构：

在上一节中，我们已经创建了基本网页的结构，现在我们将使用带有标题、标签和按钮的英雄图像。我们将在本节中设计结构。

CSS 代码： CSS 代码用于制作有吸引力的网站。此 CSS 属性用于使英雄图像具有吸引力且引人注目。

HTML

结合 HTML 和 CSS 代码：这个例子结合了 HTML 和 CSS 代码来设计英雄图像。

HTML



 

    Create a hero image
     
    

 

    
             
        
        
 
        
        
             
            GeeksforGeeks
             
A Computer Science Portal for Geeks

输出：