BackgroundCheck 是一个轻量的 JavaScript 库，能够根据元素后面的图片的亮度自动切换元素样式。例如在图片幻灯片功能中，根据图片亮度调整导航箭头的颜色，这样让图片和导航的颜色形成一定的对比度，更清晰。类似可以使用的地方还有固定导航，在滚动下拉的时候根据文本背面的图片自动修改颜色等等。

您可能感兴趣的相关文章

插件下载      效果演示

本文链接：BackgroundCheck – 根据图片亮度自动切换样式

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

BackgroundCheck – 根据图片亮度智能切换元素样式的更多相关文章

  1. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  2. 【CSS】元素样式

    1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个C ...

  3. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. JQuery_元素样式操作

    元素样式操作包括了直接设置CSS 样式.增加CSS 类别.类别切换.删除类别这几种操作方法.而在整个jQuery 使用频率上来看,CSS 样式的操作也是极高的,所以需要重点掌握.  一.css()方法 ...

  5. Vue.js-04：第四章 - 页面元素样式的设定

    一.前言 前端开发中有三大件:HTML.CSS.JavaScript,在前面的学习中,不管是学习 Vue 的指令系统还是 Vue 的事件修饰符,主要还是针对的是我们在前端开发中的 JavaScript ...

  6. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  7. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  8. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

  9. DOM访问元素样式和操作元素样式

    在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...

随机推荐

  1. 在IE7下使用angularjs(转)

    在我的环境中,主要支持的浏览器为:ie7, ie8, ie9, chrome等.在试验angularjs时,发现在ie7环境下运行有问题,于是在网上搜了一下相关的内容,说HTML标签的写法要这样: & ...

  2. Android——BitMap（位图）相关知识总结贴

    Android中文API(136) —— Bitmap http://www.apkbus.com/android-54644-1-1.html Android 4.0 r1 API—Bitmap(S ...

  3. MySQL 错误

    (1) Ignoring query to other database D:\Program Files\MySQL\MySQL Server 5.6\bin>mysql -Uroot 原因是 ...

  4. JavaScript-求时间差

    var date1=new Date(); //开始时间 alert("aa"); var date2=new Date(); //结束时间 var date3=date2.get ...

  5. 翻译--Blazing fast node.js: 10 performance tips from LinkedIn Mobile

    1.避免使用同步代码: // Good: write files asynchronously fs.writeFile('message.txt', 'Hello Node', function ( ...

  6. AtomicInteger简介

    这个类真的非常实用,更重要的是 它确实非常简单: 附上自己的代码,可以自己试试: AtomicInteger,一个提供原子操作的Integer的类.在Java语言中,++i和i++操作并不是线程安全的 ...

  7. 利用print2flashsetup.exe文档转swf

    通过使用Print2Flash您可以轻松的将您的文档转换成真正的Adobe Flash格式,最好的保证您的内容将实际可见,与其他格式相比,它并不存在查看工具的安装问题. Print2Flash中有一个 ...

  8. ECshop鼠标划过弹出 微信扫一扫代码

     效果如上图 安装步骤:1,将以下代码放到page_header.lbi里   <div class="f_l"><a href="../index.p ...

  9. 海蜘蛛WiFiDog固件 MTK7620 OEM，带云AC功能、探针、广告插入，MTK7620解包打包维修默认参数

    修改内容: 1.系统默认管理员员帐号密码 2.系统默认LAN 接口地址 3.系统默认DHCP及保留地址 4.系统默认云AC远程地址及协议内容 5.系统默认JS插入地址 6.系统默认探针位置 7.默认顶 ...

  10. mysql 分表策略

    mysql单表数据量巨大时,查询性能会很差,经常遇到的是存储日志相关的数据会每天产生大量的数据. 这里提供单表拆分成多表存储的三个思路: 一,固定N张表,ID取模存储 预先创建好N张表,记录按ID取模 ...