动态改变 图片的背景颜色

最新推荐文章于 2021-06-07 13:45:38 发布
最新推荐文章于 2021-06-07 13:45:38 发布
阅读量852 收藏 2
点赞数
文章标签： 图片 鼠标移动切换背景
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mrf_w/article/details/54175618
版权


动态改变 图片的背景颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用style改变样式</title>
<style type="text/css">
li{
 font-size: 12px;
 color: #ffffff;
 background-image: url(images/bg1.gif);
 background-repeat: no-repeat;
 text-align: center;
 height: 33px;
 width:104px;
 line-height:38px;
 float:left;
 list-style:none;
 }
</style>
</head>
<script type="text/javascript">
 
 /*
  function up(thiss){
   thiss.style.backgroundImage='url(images/bg2.gif)';
 }
 function out(thiss){
   thiss.style.backgroundImage='url(images/bg1.gif)';
 }
 */
 
 //this 我自己   （当前对象 ）  只上下文关系
 window.onload = function(){
  var li = document.getElementsByTagName("li");
  //循环绑定时间
  for(var i=0;i< li.length;i++){
   li[i].onmouseover = function(){
    this.style.backgroundImage='url(images/bg2.gif)';
    this.style.color='red';
   }
   li[i].onmouseout = function(){
    this.style.backgroundImage='url(images/bg1.gif)';
   }
  }
  
 }
 
</script>
<body>
<ul>
<li >资讯动态</li>
<li >产品世界</li>
<li >市场营销</li>
</ul>

</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用className改变样式</title>
<style type="text/css">
li{
 font-size: 12px;
 color: #ffffff;
 background-image: url(images/bg1.gif);
 background-repeat: no-repeat;
 text-align: center;
 height: 33px;
 width:104px;
 line-height:38px;
 float:left;
 list-style:none;
 }
.out{
 background-image: url(images/bg1.gif);
 }
.over{
 background-image: url(images/bg2.gif);
 color:#ffff00;
 font-weight:bold;
 cursor:hand;
 }
</style>
</head>
<script type="text/javascript">
window.onload = function(){
 
 onscroll
 var li = document.getElementsByTagName("li");
 for(var i=0;i< li.length;i++){
   li[i].onmouseover = function(){
    this.className="over";
   }
   li[i].onmouseout = function(){
    this.className = "out";
   }
  }
 
 
}
 

</script>
<body>
<ul>
<li>资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
  

</body>
</html>


Mrf_w
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现网页的背景颜色动态变化
07-28
利用JS实现网页的背景颜色动态变化，也是自己课程的作业，就把它传上来了
动态改变背景颜色
m0_67390963的博客
03-18 512
第一种，用CSS写 //第一种，用CSS写的 //.item:hover{ // background-color: skyblue; //} 第二种，用JS写 <div class="container"> <!-- 事件委派|事件委托 --> <div @mouseleave="leaveIndex"> <h2 class="all"&gt
动态修改背景图片的颜色
sinat_28496853的博客
01-04 735
android中利用shape构造的图片时，经常会用一个图片配N个颜色，并且shape是静态，如果要使用多个颜色的shape，静态写多个shape的文件是非常不好的，那可不可以动态改变shape的背景颜色而不变化基本形状呢？ 当然是可以的啦 <corners android:radiusTopLeft="4dp" android:radiusTopRight="4dp"
html动态显示背景颜色,js动态修改背景颜色方法汇总
weixin_39868959的博客
06-07 4692
本文介绍了js动态修改背景颜色的多个方法，如何用javascript控制或修改网页背景呢，这需要用到javascript操作鼠标事件及css样式的方法。一、js改变动态背景颜色一个div来显示背景颜色，一个颜色框来输入16进制颜色值，一个按钮来激发事件。原本div背景色为白色，输入颜色值之后按按钮，div背景色会从当前颜色动画过渡到目标颜色。点击后就是这样一个状态，但是截图没有动画效果，附上源代码...
java处理图片背景颜色的方法
08-27
主要为大家详细介绍了java处理图片背景颜色的方法，蓝底寸照批量转换为白底，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
改变网页背景图片代码.rar
07-05
改变网页背景图片代码
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
08-28
主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下
python之pyqt5通过按钮改变Label的背景颜色方法
12-31
使用setStyleSheet方法修改得到自己想要的字体,大小,颜色 self.lab = QLabel(标签字体大小颜色, self) self.lab.setGeometry(50,50,300,200) self.setStyleSheet(QLabel{color:rgb(225,22,173,255);font-size:50px;...
VC改变控件的背景颜色
05-03
在VC编程中要改变控件（诸如CView, CFrameWnd, or CWnd等）的背景色可通过处理特定的消息来实现。但如果想改变按钮的颜色,就只能使用自绘制的按钮(也可以用位图按钮，此处未做说明)而不能通过OnCtlColor()改变。
动态改变网页背景颜色
鞠培中的专栏
09-29 887
打开浏览器控制台，输入下面的代码即可 x=document.getElementsByTagName('html')[0]; l=x.children.length; while(l--)x.removeChild(x.children[l]); x.style.backgroundColor='black'; r=13;g=70;b=200; function e(){x.style.back
软考-考生常见操作说明-202405101400-纯图版.pdf
05-14
软考官网--2024常见操作说明：包括如何绘制网络图、UML图、表格等 模拟作答系统是计算机技术与软件专业技术资格（水平）考试的电子化考试系统界面、作答过程的仿真系统，为各级别、各资格涉及输入和页面显示的部分题型提供体验性练习。
setuptools-34.0.3.zip
最新发布
05-14
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于遗传优化GA的三目标优化仿真【包括程序，注释，操作步骤】
05-14
1.版本：matlab2022A。 2.包含：程序，中文注释，仿真操作步骤（使用windows media player播放）。 3.领域：遗传优化 4.仿真效果：仿真效果可以参考博客同名文章《基于遗传优化GA的三目标优化仿真》 5.内容：基于遗传优化GA的三目标优化仿真。遗传算法（Genetic Algorithm, GA）是一种模拟自然选择和遗传机制的全局搜索优化方法，广泛应用于解决复杂优化问题，包括具有多个目标的优化问题，即多目标遗传算法（Multi-Objective Genetic Algorithm, MOGA）。在这里，将三个目标函数进行统一的编码，通过单目标遗传优化的方式，同步求解三个目标函数的最优值。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
基于单通道脑电信号的自动睡眠分期研究.zip
05-14
本项目使用了Sleep-EDF公开数据集的SC数据进行实验，一共153条整晚的睡眠记录，使用Fpz-Cz通道，采样频率为100Hz 整套代码写的较为简洁，而且有添加相应的注释，因此进行分享，而且不仅仅说是睡眠分期，也可以作为学习如何使用神经网络去进行时序数据分类问题的一个入门项目，包括怎么用GRU、LSTM和Attention这些经典网络结构。 网络结构（具体可查看network.py文件）： 网络整体结构类似于TinySleepNet，对RNN部分进行了修改，增加了双向RNN、GRU、Attention等网络结构，可根据参数进行调整选择。 定义了seq_len参数，可以更灵活地调整batch_size与seq_len。 数据集加载（具体可查看dataset.py文件） 直接继承自torch的Dataset，并定义了seq_len和shuffle_seed，方便调整输入，并复现实验。 训练（具体可查看train.py文件）：
setuptools-27.3.1.tar.gz
05-14
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
setuptools-12.0-py2.py3-none-any.whl
05-14
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
setuptools-11.0.tar.gz
05-14
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
setuptools-5.8-py2.py3-none-any.whl
05-14
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
opencv如何改变图片颜色背景
07-14
下面是一个基本的示例代码，演示如何使用 OpenCV 来改变图片的背景颜色： ```python import cv2 import numpy as np # 读取图片 image = cv2.imread('input.jpg') # 定义要替换的颜色范围（在这个例子中，我们将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值