来源：http://www.zhangxinxu.com/wordpress/?p=5267，分享收藏

使用镂空图片，通过CSS改变颜色，达到图片切换的效果，可以同过背景图，然后改变背景色，从而达到图片换色的目的，在换色的过程中可以过渡

下面是使用背景色

        <style type="text/css">

            li{display:inline-block;}

            .icon{display:block;height:140px;width: 140px;background-color:#;overflow: hidden;transition:all .5s;}

            .icon{

                background-image: url(img/test1.png);

            }

            .icon2{background-position:  -140px;}

            .icon3{background-position:  -280px;}

            .icon4{background-position:  -420px;}

            .icon:hover{background-color: #ccc;}

        </style>

    </head>

    <body>

        <ul id='test'>

            <li>

                <i class="icon icon1"></i>

            </li>

            <li>

                <i class="icon icon2"></i>

            </li>

            <li>

                <i class="icon icon3"></i>

            </li>

            <li>

                <i class="icon icon4"></i>

            </li>

        </ul>

    </body>

可以达到换色的效果，但是在初始加载的时候会有下面这个问题加载完成前会是这样

后面张大神提出用伪类选择器，content，加载图片解决这个问题，下面代码：

        <style type="text/css">

            li{display:inline-block;}

            .icon:after{content: url(img/test1.png);position:relative;cursor: pointer;transition:all .5s;}

            .icon{display:block;height:140px;width: 140px;background-color:#;overflow: hidden;}

            .icon2:after{top:-140px;}

            .icon3:after{top:-280px;}

            .icon4:after{top:-420px;}

            .icon:hover{background-color: #ccc;}

        </style>

    </head>

    <body>

        <ul id='test'>

            <li>

                <i class="icon icon1"></i>

            </li>

            <li>

                <i class="icon icon2"></i>

            </li>

            <li>

                <i class="icon icon3"></i>

            </li>

            <li>

                <i class="icon icon4"></i>

            </li>

        </ul>

    </body>

就不会出现这样的问题

代码地址

CSS镂空图片处理的更多相关文章

  1. 用.net在画出镂空图片

    最近的一个项目需要用到这个东西,冥思苦想了好几天.还是在同事的帮助下,完成此项难题,希望能够帮助以后的博友们 ! 废话不多说,先看看效果图吧. 首先写一下讲一下思路,首先画一张图,当你的背景,然后在图 ...

  2. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  3. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  4. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  5. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  6. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  7. 网站性能优化之CSS无图片技术：三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  8. mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效

    引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...

  9. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

随机推荐

  1. Linux下rsync命令使用总结

    一.rsync的概述 rsync是类unix系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync是Linux系统下的文件同步和数据传输工具,它采用“rsync” ...

  2. java泛型学习（1）

    java泛型(Generices Type) --->概念:泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和 ...

  3. oracle 获取星期日期

    oracle 中的计算如下: 计算本星期的起始结束日期--得到星期一的日期select trunc(sysdate,''DD'')-to_char(sysdate,''D'')+2 from dual ...

  4. Git中特别的命令

    Rebase 假设我们的分支结构如下: rebase 会把从 Merge Base 以来的所有提交,以补丁的形式一个一个重新达到目标分支上.这使得目标分支合并该分支的时候会直接 Fast Forwar ...

  5. Centos 6.5 yum 安装Apache软件

    首先在系统上面查询一下是否已经安装了apache 软件[Apache软件在linux系统里的名字是httpd] rpm    -qa    httpd 如果有返回的信息,则会显示已经安装的软件.如果没 ...

  6. C# 正则表达式 判断各种字符串（如手机号)

    using System; using System.Text.RegularExpressions; namespace MetarCommonSupport { /// <summary&g ...

  7. 大快DKhadoop开发环境安装常见问题与解决方案

    2018年度国内大数据公司排名50强本月初榜单发布,榜单上看到大快搜索跻身50强,再看看他们做的DKHadoop发行版,的确还是蛮厉害的吧!最起码这款DKHadoop用起来确实在易用性方面要更好!Dk ...

  8. 实际用户ID和有效用户ID (二)

    看UNIX相关的书时经常能遇到这几个概念,但一直没有好好去理清这几个概念,以致对这几个概念一直一知半解.今天好好区分了一下这几个概念并总结如下.说白了这几个UID引出都是为了系统的权限管理. 下面分别 ...

  9. Gitlab 项目上传

    一,登陆gitab,新建reject Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限(公开共享,私有或指定合作 ...

  10. bzoj 4449: [Neerc2015]Distance on Triangulation

    Description 给定一个凸n边形,以及它的三角剖分.再给定q个询问,每个询问是一对凸多边行上的顶点(a,b),问点a最少经过多少条边(可以是多边形上的边,也可以是剖分上的边)可以到达点b. I ...