Technicalarticles

如何使用HTML和CSS创建图像叠加图标？
作者：赵刘伟 时间：2020-05-21 浏览量：
英文 | https://www.geeksforgeeks.org/how-to-create-an-image-overlay-icon-using-html-and-css/?ref=leftbar-rightbar

翻译 | web前端开发（web_qdkf）

使用图像覆盖图标可以为你的网站交互细节或一组功能加深印象。本文内容将分为两部分，第一部分创建结构并附加图标的链接。在第二部分中，我们将使用CSS进行设计。

创建结构：在本节中，我们将创建一个基本结构，并为这些图标附加Font-Awesome的CDN链接，这些图标将用作悬停时的图标。

“字体真棒”中的图标的CDN链接：


<link rel =” stylesheet” href =““ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

HTML代码：


<!DOCTYPE html> <html> 
<head>     <title>         Image Overlay Icon using HTML and CSS      </title>     <link rel="stylesheet" href=  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body>     <div>         <h1>GeeksforGeeks</h1>         <b>Image Overlay Icon using HTML and CSS</b>         <div>             <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                 alt="Geeksforgeeks">             <div>                 <a href="#">                    <i class="fa fa-user"></i>                 </a>             </div>         </div>     </div> </body> 
</html>
设计结构：在上面内容中，我们创建了将用作图像叠加图标的基本网站的结构。在这部分内容中，我们将设计图像叠加图标的结构。
CSS代码：


<style>     body {         text-align: center;     } 
    h1 {         color: green;     } 
    /* Image styling */    img {         padding: 5px;         height: 225px;         width: 225px;         border: 2px solid gray;         box-shadow: 2px 4px #888888; 
    } 
    /* Overlay styling */    .overlay {         position: absolute;         top: 23.5%;         left: 32.8%;         transition: .3s ease;         background-color: gray;         width: 225px;         height: 225px;         opacity: 0; 
    } 
    /* Overlay hover */    .container:hover .overlay {         opacity: 1;     } 
    /* Icon styling */    .icon {         color: white;         font-size: 92px;         position: absolute;         top: 50%;         left: 50%;         transform: translate(-50%, -50%);         text-align: center;     } </style>
最终解决方案：这是结合以上两部分内容后的最终代码。它将显示图像叠加图标。


<!DOCTYPE html> <html> 
<head>     <title>         Image Overlay Icon using HTML and CSS      </title>     <link rel="stylesheet" href=  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">     <style>         body {             text-align: center;         } 
        h1 {             color: green;         } 
        /* Image styling */         img {             padding: 5px;             height: 225px;             width: 225px;             border: 2px solid gray;             box-shadow: 2px 4px #888888;         } 
        /* Overlay styling */         .overlay {             position: absolute;             top: 23.5%;             left: 32.8%;             transition: .3s ease;             background-color: gray;             width: 225px;             height: 225px;             opacity: 0;         } 
        /* Overlay hover */         .container:hover .overlay {             opacity: 1;         } 
        /* Icon styling */         .icon {             color: white;             font-size: 92px;             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             text-align: center;         } </style> </head> 
<body>     <div>         <h1>GeeksforGeeks</h1>         <b>Image Overlay Icon using HTML and CSS</b>         <div>             <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                 alt="Geeksforgeeks">             <div>                 <a href="#">                    <i class="fa fa-user"></i>                 </a>             </div>         </div>     </div> </body> 
</html>
最终输出效果：

640.gif

返回列表

想和你做个朋友

DO U LIKE?