如何使用HTML、CSS和JavaScript随机改变图片颜色

在本文中，我们将创建一个网页，通过点击图片来随机改变图片的颜色，使用的是HTML、CSS和JavaScript。图片颜色将通过JavaScript的Math random()函数随机改变。

方法：

首先使用HTML的标签选择您的图片。
在JavaScript中，使用Math random()函数随机选择颜色。
我们将使用事件监听器来改变图片颜色。事件监听器用于为给定图片的背景颜色更改随机颜色。
HTML代码：
创建一个HTML文件。
创建一个body，并使用HTML的 src来选择您的图片。
在HTML的body标签内，创建一个HTML div并给它一个id。

HTML

<!DOCTYPE html>
<html>
<head>
     <title>random image color change</title>
</head>
 
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220803165300/geeksimage-200x145.png">
    <div id="divID"></div>
</body>  
</html>

CSS代码：

We use CSS mix-blend-mode属性将元素内容与父元素内容和背景混合。

CSS

* {
    margin: 0;
    padding: 0;
}
 
#divID {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    mix-blend-mode: hue;
}
 
body {
    overflow: hidden;
}
 
img {
    height: 100vh;
    width: 100%;
}

JavaScript代码：

首先，我们使用Math.Floor()随机选择颜色。
之后，我们将添加一个点击事件监听器来改变颜色。

Javascript

const divElem = document.getElementById("divID");
function randomcolor() {
    return Math.floor(Math.random() * 255);
}
divElem.addEventListener('click', () => {
    divElem.style.backgroundColor =
        "rgba('+randomcolor()+','+randomcolor()+','+randomcolor()+'\)"
})

完整代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Random image color</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #divID {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100vh;
            mix-blend-mode: hue;
        }
 
        body {
            overflow: hidden;
        }
 
        img {
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
   
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220803165300/geeksimage-200x145.png">
    <div id="divID"></div>
    <script>
        const divElem = document.getElementById("divID");
        function randomcolor() {
            return Math.floor(Math.random() * 255);
        }
        divElem.addEventListener('click', () => {
            divElem.style.backgroundColor = 'rgba('
                + randomcolor() + ',' + randomcolor()
                + ',' + randomcolor() + '\)'
        })
    </script>
</body>
</html>

输出： 点击图片以随机改变颜色。

如何使用HTML、CSS和JavaScript随机改变图片颜色