CSS镂空图片处理
来源：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镂空图片处理的更多相关文章
- 用.net在画出镂空图片
最近的一个项目需要用到这个东西,冥思苦想了好几天.还是在同事的帮助下,完成此项难题,希望能够帮助以后的博友们 ! 废话不多说,先看看效果图吧. 首先写一下讲一下思路,首先画一张图,当你的背景,然后在图 ...
- Django调用JS、CSS、图片等静态文件
zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- Spring MVC程序中得到静态资源文件css,js,图片
转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 网站性能优化之CSS无图片技术：三角形
1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...
- mvc伪静态<四> 伪静态后静态页面或者引用的css和图片失效
引用的css和图片失效的解决办法 把样式引用文件的相对路径改成绝对路径就可以了 比如原先的引用路径为:<link href="~/Content/css/style.css" ...
- CSS实现图片快速等比例缩放，效果佳
初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...
随机推荐
- (转）C＋＋初始化与赋值
来源:http://www.cnblogs.com/chio/archive/2008/10/06/1305145.html 先来个区别说明:赋值操作是在两个已经存在的对象间进行的,而初始化是要创建一 ...
- m mm等和envsetup.sh
envsetup.sh简介: Android 完成编译的时候先执行 source build/envsetup.sh.在这个shell 脚本中定义了 help, croot, m, mm, mmm 等 ...
- javabean（实体类）转Map类型
javabean(实体类)转Map类型 从网上"風亦飞"的导出EXCEL的源代码提取出来的.认为非常好用.分享一下给大家,主要看beanToMap方法就OK了 /*以下是从poi导 ...
- windows下，java环境变量的设置，设置点击startup.bat启动tomcat
1.首先.安装好java jdk以后环境变量设置: CLASSPATH:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar JAVA_HOME:C:\ ...
- JMeter连接数据库(查询出的数据作为参数)
针对Mysql jdbc:mysql://ip:3306/数据库名?useUnicode=true&characterEncoding=utf8&allowMultiQueries=t ...
- FastAdmin CMS 插件下载
FastAdmin CMS 插件下载 CMS内容管理系统插件(含小程序) 自定义内容模型.自定义单页.自定义表单.自定义会员发布.付费阅读.小程序等 提供全部前后端源代码和小程序源代码 功能特性 基于 ...
- 使用 php 7.3.0 官网的压缩包安装 FastAdmin
使用 php 7.3.0 官网的压缩包安装 FastAdmin 直接从 php.net 官网下载了一 php7.3.0 的压缩包,解压到 c:/temp/php73 目录. 将 c:/temp/php ...
- Linux下安装xampp和bugfree
1.BugFree简介 1.1 BugFree的来源 BugFree是借鉴微软的研发流程和Bug管理理念,使用PHP+MySQL独立写出的一个Bug管理系统.简单实用.免费并且开放源代码(遵循GNU ...
- 【转】每天一个linux命令（18）：locate 命令
原文网址:http://www.cnblogs.com/peida/archive/2012/11/12/2765750.html locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其 ...
- maven 指定 jdk 版本
方法1:直接修改 本地 settings.xml 文件 <profiles> </profiles> 之间加入 下面的 <profile> <id> ...