「開發小技巧」07—如何使用HTML和CSS創建圖像疊加圖標？

用圖像覆蓋圖標可以為你的網站交互細節或一組功能加深印象。本文內容將分為兩部分，第一部分創建結構并附加圖標的鏈接。在第二部分中，我們將使用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 class="container"> 
        <h1>GeeksforGeeks</h1> 
        <b>Image Overlay Icon using HTML and CSS</b> 
        <div class="img"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks"> 
            <div class="overlay"> 
                <a href="#" class="icon"> 
                   <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 class="container"> 
        <h1>GeeksforGeeks</h1> 
        <b>Image Overlay Icon using HTML and CSS</b> 
        <div class="img"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"
                 alt="Geeksforgeeks"> 
            <div class="overlay"> 
                <a href="#" class="icon"> 
                   <i class="fa fa-user"></i> 
                </a> 
            </div> 
        </div> 
    </div> 
</body> 

</html>

最終輸出效果：

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學習資料，只要私信：“前端"等3秒后即可獲取地址，

里面概括應用網站開發，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關視頻資料，等你來拿

么疊加圖片？在數字時代，圖像處理已成為我們生活中不可或缺的一部分。圖像疊加是一種常見且有趣的圖像處理技術，它能夠將多個圖像層疊在一起，創造出令人驚嘆的效果。下面本文將介紹幾種常用的圖像疊加方法，幫助你輕松實現圖像疊加的藝術。

一、使用圖像編輯軟件

圖像編輯軟件是進行圖像疊加最常用的工具之一。以下是一些常見的軟件，例如Adobe Photoshop，茄子相機和Pixlr等。這些軟件提供了強大的編輯功能，使你可以將它們疊加在一起。

1. 打開茄子相機的主頁面，點擊圖片編輯功能。

2. 打開作為背景的圖像，然后點擊底部的疊加功能。

3. 導入你想要疊加的圖像，將圖像拖動到背景圖上，并調整圖像的位置和大小以達到所需效果。

4. 圖片調整完成以后，即可點擊右上角的保存按鈕，進行保存。

二、使用編程語言

如果你具備編程知識，可以使用圖像處理庫來實現圖像疊加。一些常用的編程語言和庫包括Python中的Pillow和OpenCV，以及JavaScript中的Fabric.js等。使用編程語言進行圖像疊加可能需要一些學習和實踐，但它提供了更大的靈活性和控制力。

1. 安裝所選編程語言的圖像處理庫。

2. 使用庫函數打開要疊加的圖像文件。

3. 創建一個新的圖像對象或加載其他要疊加的圖像。

4. 使用庫提供的函數將兩個圖像疊加在一起，并調整透明度和混合模式等參數。

5. 保存并輸出疊

以上就是關于怎么疊加圖片？的全部分享了，大家可以根據自己需求和具體情況選擇最適合自己的方法，希望今天的分享能夠幫到大家。

這樣一個需求，就是在一個DIV中包含有一個Image標簽，但是在Div標簽中包含有一張背景圖片，設計圖上的樣子是這張背景圖片是有一個透明度的，但是如果直接使用opacity屬性設置的的話就會連Div中的內容的透明度也會受到影響，那么我們如何在HTML中設置div背景圖片的透明度呢？，可以通過以下幾種方法實現。

方法一：使用偽元素

這是在日常開發中被推薦使用的方法，通過這種方式實現不會影響到div中的其他內容的透明度只會影響它自己背景的透明度，詳細實現如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 調整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            這里是內容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現起來要簡單很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內容
    </div>
</body>
</html>

方法三：使用CSS濾鏡

這種方式實現會影響到整個的div的樣式，也就是說頁面中的內容的透明度也會受到影響，并且這種影響不會被其他樣式所改變。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 調整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        這里是內容
    </div>
</body>
</html>

以上就是實現如何調整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調的內容來講這種方式實現效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。

在實際開發中，我們可以選擇合適的方式來實現這個需求。當然還有其他的實現方式，有興趣的讀者可以留言我們一起討論。

在線咨詢

上一篇：HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹
下一篇：web前端入門到實戰：js刷新當前頁面的5種方式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「開發小技巧」07—如何使用HTML和CSS創建圖像疊加圖標？

方法一：使用偽元素

方法二：使用RGBA顏色疊加

方法三：使用CSS濾鏡

您的項目需求