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

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

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

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

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

示例代码

    
    


     
    

    
点击图片更改颜色
    

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

代码解析

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

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

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

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

示例代码

    
        
        
    
    
        

            

              
点击按钮更改图片颜色。
               
              
背景颜色为：# 0f5257
              生成颜色
            
          
          
    

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

代码解析

1. HTML 部分：
   • 使用  标签引入图片，并设置相应的 src 属性。
   • 创建一个包含文本、图片和按钮的容器，用于展示和交互。

1. CSS 部分：
   • 为 body 设置背景颜色。
   • 使用 Flexbox 布局使容器居中。
   • 为文本添加动画效果，使用 @keyframes 定义颜色变化的关键帧。

1. JavaScript 部分：
   • 定义一个包含十六进制颜色字符的数组。
   • 通过循环生成 6 位随机颜色代码。
   • 更新页面上显示的颜色代码，并将新颜色应用到图片背景。

编程狮课程推荐

如果你想更深入地学习 HTML、CSS 和 JavaScript，欢迎访问 编程实战。我们提供以下相关课程：

• HTML + CSS 基础实战
• JavaScript 基础实战
• Bootstrap 前端开发框架
• jQuery 入门实战
• 更多实战课程查看编程实战

在编程狮，我们致力于为每一位学习者提供高质量的编程教育资源，帮助你实现从入门到精通的飞跃！

通过今天的教程，你已经学会了如何使用 HTML、CSS 和 JavaScript 实现图片颜色的随机更改。希望你能继续探索并将其应用到你的项目中。