js 实现 Logo(图片)根据图片后面的图片颜色而变化成相反的颜色【解决logo固定后 会出现与不同板块的颜色相同导致于看不清logo的情况】

news2025/7/23 6:02:19

效果展示:在这里插入图片描述


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.container {
	  position: relative;
	  width: 500px; /* 按照实际情况设置宽度 */
	}
	
	.logo {
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 1; /* 使 logo 在图片上方 */
	  color: #fff; /* 设置 logo 文字的颜色为白色 */
	  font-size: 36px;
	  font-weight: bold;
	  text-transform: uppercase;
	  mix-blend-mode: difference; /* 使用 mix-blend-mode 属性实现颜色反转效果 */
	  transition: color 0.3s ease; /* 设置过渡效果,使变化更加平滑 */
	}
	
	.container.overlap .logo {
	  color: #000; /* 当容器与图片重叠时,将 logo 文字的颜色改为黑色 */
	}

</style>
<div class="container">
  <img src="https://img-blog.csdnimg.cn/47f119243ad644988f3627aeac8db268.jpeg#pic_center">
	<div style="width: 100%;height: 560px;background-color: red;"></div>
	<div style="width: 100%;height: 560px;background-color: #000000;"></div>
	<div style="width: 100%;height: 560px;background-color: #CCCCCC;"></div>
	<div style="width: 100%;height: 560px;background-color: #FFFFFF;"></div>
	<div style="width: 100%;height: 560px;background-color: #FFFFFF;"></div>
  <div class="logo"><img src="https://img-blog.csdnimg.cn/1ee5097edfef4bf9b0bfb43f68790b29.png#pic_center" alt=""></div>
</div>


<script type="text/javascript">
	$(document).ready(function() {
	  var container = $('.container');
	  var logo = $('.logo');
	  
	  /* 判断容器与图片是否重叠,设置相应的 class */
	  function checkOverlap() {
	    var overlap = logo.width() * logo.height() > 0 && (
	      logo.offset().left < container.offset().left + container.width() &&
	      logo.offset().left + logo.width() > container.offset().left &&
	      logo.offset().top < container.offset().top + container.height() &&
	      logo.offset().top + logo.height() > container.offset().top
	    );
	    container.toggleClass('overlap', overlap);
	  }
	  
	  /* 页面加载时判断容器与图片是否重叠 */
	  checkOverlap();
	  
	  /* 监听窗口的 resize 事件,以防容器大小改变导致重叠状态改变 */
	  $(window).on('resize', checkOverlap);
	});

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/368475.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

进程概念(二)

文章目录进程概念&#xff08;二&#xff09;1. 进程状态1.1 阻塞和挂起状态1.2 进程状态1.2.1 进程查看S状态R状态1.2.2 D状态1.2.3 T状态1.2.4 t状态1.2.5 Z状态(僵尸状态)1.3 孤儿进程2. 环境变量2.1 背景2.2 认识环境变量2.3 获取环境变量2.4 环境变量是什么2.5 认识命令行…

vue:pdf.js使用细节/隐藏按钮/设置、获取当前页码/记录阅读进度/切换语言(国际化)

需求描述 在网页中预览pdf时&#xff0c;希望实现3点需求&#xff1a;1、隐藏一些功能按钮&#xff08;比如下载&#xff09;&#xff1b;2、打开pdf时自动定位到最后浏览的页&#xff08;记录阅读进度&#xff09;&#xff1b;3、实现国际化&#xff08;在代码中更改pdf插件使…

Java面试题-Spring框架

Spring框架 1. BeanFactory和ApplicationContext有何区别 BeanFactory是Spring最底层的接口&#xff0c;是IoC的核心&#xff0c;定义IoC的基本功能。 ​ BeanFactory具有&#xff1a;延迟实例化的特性。在启动的时候&#xff0c;不会实例化Bean&#xff0c;只有有需要从容器…

ESMM的理解和高频面试问题

ESMM的理解首先&#xff0c;理解部分主要是ESMM要解决什么问题&#xff0c;以及解决方案。弱未度过原文的可以查阅原论文。论文地址&#xff1a;https://arxiv.org/pdf/1804.07931.pdf实现代码&#xff1a;https://github.com/PaddlePaddle/PaddleRec/tree/master/models/multi…

2023最新谷粒商城笔记之购物车篇(全文总共13万字,超详细)

购物车 环境搭建 创建购物车项目 第一步、创建gulimall-cart服务&#xff0c;并进行降版本处理 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.8.RELEASE<…

angular框架表格自定义导出,ui组件库为【devExpress by devExtreme】导出插件为exceljs、file-saver

前言 使用的ui组件库为devExtreme注意&#xff1a;如果你没有使用这个组件库&#xff0c;那后续的代码可能对你不适用&#xff01;&#xff01;&#xff01;&#xff0c;因为devExtreme和exceljs是结合着来的 其地址如下&#xff1a; devexpress https://js.devexpress.com/ …

一文速学-Pandas查询索引操作详解+实例代码展示

目录 前言 一、按列表索引查询 查询单值 1.at(单值查询-loc) 2.iat(单值查询-iloc) 3. loc(行/列名索引查询) 4. iloc(行/列索引查询) 二、按条件查询 单条件查询 多条件查询 嵌套筛选 总结 前言 关于一文速学Pandas系列已经将基础部分内容更完&#xff0c;基础部分的…

ASEMI高压MOS管ASE65R330参数,ASE65R330图片

编辑-Z ASEMI高压MOS管ASE65R330参数&#xff1a; 型号&#xff1a;ASE65R330 漏极-源极电压&#xff08;VDS&#xff09;&#xff1a;650V 栅源电压&#xff08;VGS&#xff09;&#xff1a;20V 漏极电流&#xff08;ID&#xff09;&#xff1a;12.5A 功耗&#xff08;P…

[数据结构]:03-栈(C语言实现)

目录 前言 已完成内容 单链表实现 01-开发环境 02-文件布局 03-代码 01-主函数 02-头文件 03-StackCommon.cpp 04-StackFunction.cpp 结语 前言 此专栏包含408考研数据结构全部内容&#xff0c;除其中使用到C引用外&#xff0c;全为C语言代码。使用C引用主要是为了简…

跨境卖家必看的沃尔玛Walmart商家入驻教程

沃尔玛Walmart作为作为全球连锁超市的鼻祖&#xff0c;有不可比拟的知名度。当沃尔玛从线下延伸到线上后&#xff0c;就成为一个自带IP与流量的线上平台&#xff0c;在全世界都拥有数量庞大的消费者群体。所以龙哥就结合自己注册Walmart的过程给大家详细讲解一下。 Walmart卖家…

365智能云打印怎么样?365小票无线订单打印机好用吗?

365智能云打印怎么样&#xff1f;365智能云打印是有赞官方首推的订单小票打印机&#xff0c;荣获2016年有赞最佳硬件服务商。可以实现远程云打印&#xff0c;无需连接电脑&#xff0c;只需通过GPRS流量或者WIFI即可连接&#xff0c;不受地理位置和距离限制。365小票无线订单打印…

1W+企业都在用的数字化管理秘籍,快收藏!

企业数字化&#xff0c;绕不开的话题。 随着国家相继出台各种举措助力中小企业数字化转型&#xff0c;积极推动产业数字化转型&#xff0c;培育数字经济新生态&#xff0c;企业想要谋生存&#xff0c;求发展&#xff0c;必然需要做好数字化转型和管理。 本篇文章想跟大家一起…

【STM32MP157应用编程】2.GPIO输入、输出、中断

目录 GPIO文件 指令操作GPIO 程序操作GPIO 程序说明 程序代码 2_GPIO_4.c 启动交叉编译工具 编译 拷贝到开发板 测试 GPIO文件 在/sys/class/gpio目录下&#xff0c;存放了GPIO的文件。 gpiochipX&#xff1a;当前SoC所包含的GPIO控制器&#xff0c;STM32MP157一共包…

新型开源C2框架:浩劫

研究人员发现了一次针对政府实体的新攻击&#xff0c;攻击者在此期间使用了一种名为浩劫&#xff08;Havoc &#xff09;的新型 C2 框架。 尽管 C2 框架广泛可用&#xff0c;但 Havoc 作为一种先进的后开发框架脱颖而出&#xff0c;可以躲避最新版本的 Windows 11 Defender。 …

一文带你快速初步了解云计算与大数据

目录 &#x1f50d;一、云计算基础 1、云计算的概念、特点、关键技术 2、云计算的分类 3、云计算的部署模式 4、云计算的服务模式&#xff1a;IaaS、PaaS、SaaS分别是什么&#xff0c;具体含义要清楚 5、物联网的概念 6、物联网和云计算、大数据的关系 7、了解云计算的…

Python-生成元组和字典

1.生成元组元组是元素按顺序组合后的产物&#xff0c;元组对象的类型是tuple型含有两个元素的元组成为数据对元组可以包含任意数量和任意类型的元素&#xff0c;其元素总数可以为0、1、2等&#xff0c;并且元素的先后顺序是由意义的。另外&#xff0c;元组中的元素类型没有必要…

open3d最大平面检测,平面分割

1.点云读入 读入文件&#xff08;配套点云下载链接&#xff09; # 读取点云 pcd o3d.io.read_point_cloud("point_cloud_00000.ply")配套点云颜色为白色&#xff0c;open3d的点云显示默认背景为白色&#xff0c;所以将点云颜色更改为黑色 pcd.colors o3d.utilit…

利用 OLE 对象漏洞的 HWP 恶意文件浮出水面

ASEC 分析人员发现了一个利用 OLE 对象的恶意 HWP 文件&#xff0c;尽管其使用了 2020 年就被识别的恶意 URL&#xff0c;但仍然使用了 Flash 漏洞&#xff08;CVE-2018-15982&#xff09;&#xff0c;需要用户谨慎对待。 打开 HWP 文件时会在 %TEMP%文件夹中生成如下文件。攻…

数据结构之基:从根儿上了解数据结构的特性

学好数据结构&#xff0c;就等于成功了一半。 程序是对现实的模拟&#xff0c;现实是由时间和空间组成的&#xff0c;高效的人都是用最少的时间、最少的空间来做最伟大的事&#xff0c;程序亦是如此。我们要选择最合理的算法和最合理的数据结构&#xff0c;来写最好的代码&…

MySQL进阶知识

1 存储引擎1.1 MySQL体系结构1.2 存储引擎简介存储引擎就是存储数据、建立索引、更新/查询数据等技术的实现方式。存储引擎是基于表的&#xff0c;而不是基于库的&#xff0c;同一个库的多个表可以采用不同的存储引擎&#xff0c;所以存储引擎也经常称为表类型。创建表时可以指…