如何使用 HTML 和 CSS 向图像添加登录表单？

许多网站都使用图像上的登录表单。像包含酒店图片的酒店网站或一些组织一些特殊活动的组织，其中包含该活动图片和登录表单。在这种情况下，您可以在该图片上设计登录或注册表单。这种设计将使网站比常规登录或注册表更有吸引力。要在图像上创建登录表单，您只需要 HTML 和 CSS。下面的例子将说明这个概念的方法。
创建结构：在本节中，我们将创建一个基本的网站结构，以在图像上创建登录表单。

HTML 代码： HTML 代码用于设计登录表单的结构。

html



 

    

 

    
        GeeksforGeeks
         
        
            Username
            
 
            Password

CSS

html



 

    
    

 

    
        GeeksforGeeks
         
        
            Username
            
 
            Password

设计结构：在上一节中，我们已经创建了基本网站的结构。在本节中，我们将设计登录表单的结构。

结构的CSS代码：

CSS

结合 HTML 和 CSS 代码：这是结合以上两部分后的最终代码。您可以看到图像上的左对齐登录表单与普通登录表单相比更具吸引力。

html



 

    
    

 

    
        GeeksforGeeks
         
        
            Username
            
 
            Password

输出：

背景图片