当前位置：首页 > article >正文

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

article 2025/8/4 2:34:17

原文：如何使用 HTML、CSS 和 JavaScript 随机更改图片颜色 | w3cschool笔记

（请勿标记为付费！！！！）

在网页开发中，为图片添加动态效果可以显著提升用户体验。今天，我将向大家介绍如何通过 HTML、CSS 和 JavaScript 实现图片颜色的随机更改。这个教程不仅简单易懂，还能帮助你理解前端开发中的交互式设计原理。

方法一：使用 Math.random() 函数

示例代码

<!DOCTYPE html>
<html>
<head><title>随机更改图片颜色 | 编程狮（w3cschool.cn）</title><style>body {overflow: hidden; /* 隐藏溢出内容 */}#container {top: 0;width: 350px;height: 150px;position: absolute; /* 绝对定位 */mix-blend-mode: hue; /* 颜色混合模式 */}img {width: 200px;height: auto; /* 自动调整高度，保持宽高比 */}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 之间的随机整数}divElement.addEventListener('click', () => { // 添加点击事件监听器divElement.style.backgroundColor = 'rgba('+ selectcolor() + ',' + selectcolor() // 设置随机背景颜色+ ',' + selectcolor() + ')';});</script>
</body>
</html>

将代码复制至 > HTML在线编译器查看效果

代码解析

HTML 部分：
- 使用 <img> 标签引入图片，并设置相应的 src 属性。
- 创建一个 <div> 容器，用于应用颜色变化效果。

CSS 部分：
- 为 body 设置 overflow: hidden，以隐藏可能溢出的内容。
- 为 #container 设置绝对定位和尺寸，并应用 mix-blend-mode: hue 以实现颜色混合效果。

JavaScript 部分：
- 使用 Math.random() 生成随机数，并通过 Math.floor() 将其转换为整数。
- 为容器添加点击事件监听器，点击时随机更改背景颜色。

方法二：使用十六进制颜色代码

示例代码

<!DOCTYPE html>
<html><head><title>随机更改图片颜色 | 编程狮（w3cschool.cn）</title><style>body {background-color: paleturquoise; /* 设置背景颜色 */}.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; /* 自动调整高度，保持宽高比 */border: 2px solid white; /* 添加边框 */}p {animation: hexcolors 5s infinite alternate; /* 添加动画效果 */font-size: 20px;font-weight: bold;color: navy;}@keyframes hexcolors { /* 定义动画关键帧 */0% { color: violet; }20% { color: indigo; }40% { color: blue; }60% { color: green; }80% { color: yellow; }100% { color: orangered; }}@media screen and (min-width: 992px) { /* 响应式设计 */.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 = [ // 定义十六进制颜色字符数组"0", "1", "2", "3", "4", "5", "6", "7", "8", "9","A", "B", "C", "D", "F"];let hexColorCode = ""; // 初始化颜色代码字符串for (let i = 0; i < 6; i++) { // 循环生成 6 位颜色代码let randomIndex = Math.floor(Math.random() * hexNumbers.length);hexColorCode += hexNumbers[randomIndex];}document.getElementById("colorCode").innerHTML = hexColorCode; // 更新显示的颜色代码document.getElementsByTagName("img")[0].style.background = "#" + hexColorCode; // 应用新颜色}</script></body>
</html>

将代码复制至 > HTML在线编译器查看效果