如何使用 HTML、CSS 和 JavaScript 隨機更改圖片顏色

編程獅（w3cschool.cn） 2025-05-23 16:57:27 瀏覽數(shù) (54)

反饋

在網(wǎng)頁開發(fā)中，為圖片添加動態(tài)效果可以顯著提升用戶體驗。今天，我將向大家介紹如何通過 HTML、CSS 和 JavaScript 實現(xiàn)圖片顏色的隨機更改。這個教程不僅簡單易懂，還能幫助你理解前端開發(fā)中的交互式設(shè)計原理。

方法一：使用 Math.random() 函數(shù)

示例代碼

<!DOCTYPE html>
<html>
<head>
    <title>隨機更改圖片顏色 | 編程獅（w3cschool.cn）</title>
    <style>
        body {
            overflow: hidden; /* 隱藏溢出內(nèi)容 */
        }
        #container {
            top: 0;
            width: 350px;
            height: 150px;
            position: absolute; /* 絕對定位 */
            mix-blend-mode: hue; /* 顏色混合模式 */
        }
        img {
            width: 200px;
            height: auto; /* 自動調(diào)整高度，保持寬高比 */
        }
        p {
            font-size: 20px;
            font-weight: bold;
            margin-left: 15px;
        }
    </style>
</head>
<body>
    <img src="https://atts.w3cschool.cn/images%2Fw3c%2F20220506-154940.png" alt="示例圖片"> 
    <div id="container"></div>
    <p>點擊圖片更改顏色</p>
    <script>
        const divElement = document.getElementById("container"); // 獲取容器元素
        function selectcolor() {
            return Math.floor(Math.random() * 255); // 生成 0 到 255 之間的隨機整數(shù)
        }
        divElement.addEventListener('click', () => { // 添加點擊事件監(jiān)聽器
            divElement.style.backgroundColor = 'rgba('
                + selectcolor() + ',' + selectcolor() // 設(shè)置隨機背景顏色
                + ',' + selectcolor() + ')';
        });
    </script>
</body>
</html>

將代碼復(fù)制至 > HTML在線編譯器查看效果

代碼解析

HTML 部分：
- 使用 <img> 標(biāo)簽引入圖片，并設(shè)置相應(yīng)的 src 屬性。
- 創(chuàng)建一個 <div> 容器，用于應(yīng)用顏色變化效果。

CSS 部分：
- 為 body 設(shè)置 overflow: hidden，以隱藏可能溢出的內(nèi)容。
- 為 #container 設(shè)置絕對定位和尺寸，并應(yīng)用 mix-blend-mode: hue 以實現(xiàn)顏色混合效果。

JavaScript 部分：
- 使用 Math.random() 生成隨機數(shù)，并通過 Math.floor() 將其轉(zhuǎn)換為整數(shù)。
- 為容器添加點擊事件監(jiān)聽器，點擊時隨機更改背景顏色。

方法二：使用十六進制顏色代碼

示例代碼

<!DOCTYPE html>
<html>
    <head>
        <title>隨機更改圖片顏色 | 編程獅（w3cschool.cn）</title>
        <style>
            body {
                background-color: paleturquoise; /* 設(shè)置背景顏色 */
            }
            .container {
                width: 75%;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                margin: auto;
            }
            h3 {
                font-size: 18px;
                margin: 10px 20px 20px 10px;
                color: white;
            }
            .btn1 {
                padding: 2% 2%;
                border: none;
                border-radius: 4px;
                color: teal;
                font-size: 15px;
                cursor: pointer;
            }
            img {
                max-width: 100%; /* 圖片最大寬度為容器寬度 */
                height: auto; /* 自動調(diào)整高度，保持寬高比 */
                border: 2px solid white; /* 添加邊框 */
            }
            p {
                animation: hexcolors 5s infinite alternate; /* 添加動畫效果 */
                font-size: 20px;
                font-weight: bold;
                color: navy;
            }
            @keyframes hexcolors { /* 定義動畫關(guān)鍵幀 */
                0% { color: violet; }
                20% { color: indigo; }
                40% { color: blue; }
                60% { color: green; }
                80% { color: yellow; }
                100% { color: orangered; }
            }
            @media screen and (min-width: 992px) { /* 響應(yīng)式設(shè)計 */
                .container { width: 100vw; margin: auto; }
                h2 { font-size: 30px; }
                .btn1 { padding: 2% 2%; margin: auto; font-size: 20px; font-weight: bold; }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div>
              <p>點擊按鈕更改圖片顏色。</p>
              <img src="https://atts.w3cschool.cn/images%2Fw3c%2F20220506-154940.png" alt="示例圖片"> <!-- 替換為編程獅的圖片 -->
              <h3>背景顏色為：# <span id="colorCode">0f5257</span></h3>
              <button onclick="changeColor()" class="btn1">生成顏色</button>
            </div>
          </div>
          <script>
              function changeColor() {
                let hexNumbers = [ // 定義十六進制顏色字符數(shù)組
                    "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
                    "A", "B", "C", "D", "F"
                ];
                let hexColorCode = ""; // 初始化顏色代碼字符串
                for (let i = 0; i < 6; i++) { // 循環(huán)生成 6 位顏色代碼
                    let randomIndex = Math.floor(Math.random() * hexNumbers.length);
                    hexColorCode += hexNumbers[randomIndex];
                }
                document.getElementById("colorCode").innerHTML = hexColorCode; // 更新顯示的顏色代碼
                document.getElementsByTagName("img")[0].style.background = "#" + hexColorCode; // 應(yīng)用新顏色
              }
          </script>
    </body>
</html>

將代碼復(fù)制至 > HTML在線編譯器查看效果