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. 初识React,Virutal DOM, State以及生命周期

    这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...

  2. JAVA B/S系统实现客户端屏幕截图,Java版的QQ截图

    简介:本方法首先需要抓到屏幕的整个图象,将图象显示在一个JFrame中,再将JFrame全屏显示,这样就模拟出了一个桌面,Java也就可以获得鼠标的作用区域从而实现桌面中的小范围截屏.Java实现QQ ...

  3. Build Slic3r on Windows // 如何在Windows上编译Slic3r

    下载Strawberry Perl 5.22 64bit绿色版,解压缩到某个地方,比如C盘根目录,比如 C:\strawbrry-perl-5.22.2.1-64bit-portable 下载Boos ...

  4. Hibernate不调用update却自动更新

    案例: TInfCustomer cus = (TInfCustomer) this.baseDao.getOne(helper); cus.setXXX cus .setXXX 不调用update也 ...

  5. Scala 深入浅出实战经典 第58讲：Scala中Abstract Types实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载: 百度云盘:http://pan.baidu.com/s/1c0noOt ...

  6. android 检测网络是否可用

    /**     * 检测网络是否可用     *      * @return     */    public boolean isNetworkConnected() {        Conne ...

  7. memcached命令

    memcached相对于redis来说,简直简单太多,命令也少很多,一般应用都是使用redis,但了解一下也还是不错的. 具体命令和用法很参见:http://www.runoob.com/memcac ...

  8. ecshop退出登录会清空购物车的bug优化，最完美解决方法

    ecshop退出登陆后,会清空购物车,大家都应该知道有这样的勉强算bug的问题. 网上类似的教程相当多,但都有问题,说句不好听的,算是引新手入歧途! 总结网上方法如下: 1.修改init.php,把s ...

  9. 在c#程式中配置log4net

    參考網址: http://www.cnblogs.com/kissazi2/p/3393595.html http://www.cnblogs.com/kissazi2/p/3389551.html ...

  10. X509证书中RSA公钥的提取与载入

    原文链接: http://blog.chinaunix.net/uid-16515626-id-2741894.html   由于项目需要,我计划利用openssl开发一个基本的CA,实现证书的发放等 ...