css3 实现png图片改变背景颜色
实际上是用的是就是css的filter的drop-shadow属性
drop-shadow:
1 不支持内阴影
2 不支持多阴影
3 兼容性 ie13+ 谷歌 火狐 android4.4+ ios
4 实现的是正真意义上的投影。对于非透明的部分都会有投影,表现形式与box-shdow不一样,透明的部分不会有阴影,包括png格式的图片的透明部分
demo1修改png图片的颜色:
html
<div class="demo1">
<div class="del"></div>
</div>
css
.demo1 {
width: 16px;
height: 16px;
overflow: hidden;
margin: 50px auto;
}
.demo1 .del{
width: 16px;
height: 16px;
position: relative;
background: url("images/delete.png") no-repeat center;
}
.demo1 .del:hover{
left:-16px;
border-right:16px solid transparent;
-webkit-filter:drop-shadow(16px 0 0px red);
filter:drop-shadow( 16px 0 0px red);
}
filter:drop-shado(x偏移 y偏移 r模糊半径 color投影的颜色);
1 “改变颜色”时设置left:-16px:使原来的背景颜色,向左移动16px(背景图片的宽度是16px,元素的宽度也是16px);
2 父元素overflow:hidden;就隐藏了,这是del被完全隐藏,
3 为了显示投影(根据投影在透明部分没有投影)设置border-right:16px solid transparent;(增加del的表现宽度),下面就只剩下改变图片的颜色了,根据drop-shadow
4 设置投影filter:drop-shadow( 0px 0 0px red); 这时候的投影在del背景图片的下方,因为背景图左移动16px,所以看不到,这是设置x轴偏移16px,刚好的2 中设置的border-right上,这样就实现css改变png图片的颜色了
demo2:实现带有三角的box的投影 三角的实现方法:为了兼容都是用border写的,使用box-shadow(盒阴影)如果实现三角也带阴影,就需要在父元素和三角上都设置box-shadow就会出现阴影重叠,效果不是很好
这里就可以使用drop-shadow实现
html
<div class="demo">
<div class="angle"></div>
</div>
css
.demo {
width: 300px;
height: 100px;
background-color: #fff;
margin: 100px auto;
/*-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;*/
filter: drop-shadow(5px 5px 10px #000);
} .angle {
position: absolute;
margin-left: -20px;
margin-top: 30px;
width:;
height:;
border-right: 20px solid #fff;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent; }
效果图:
css3 实现png图片改变背景颜色的更多相关文章
- [JS9] document's bgColor改变背景颜色
<HTML> <HEAD> <TITLE>设置背景颜色</TITLE> </HEAD> <BODY> <CENTER> ...
- OpenGL的glClearColor和glClear改变背景颜色
OpenGL的glClearColor和glClear改变背景颜色 结合以下两个函数void glClearColor(GLclampf red, GLclampf green, GLclamp ...
- iOS 创建多个button实现点击改变背景颜色
工程中需要实现与UISegmentedControl效果相似的一排一共十个button,如下图.但是SegmentedControl修改不太方便,就用button替代, 循环创建十个button,点击 ...
- 设置UINavigation的背景图片和背景颜色
//通过背景图片来设置背景 float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue]; UIImage * ...
- UITabBar-UITabBarItem图片的背景颜色属性和文字的颜色大小设置
UITabBarItem设置的图片选中状态下默认的是蓝色,如何改变它的颜色为图片自带的颜色呢? typedef NS_ENUM(NSInteger, UIImageRenderingMode) { / ...
- xml中,button改变背景颜色方法
在画几个设置界面,用到了button控件,对于button空间的背景色在不同状态下的颜色改变方法,做了一下尝试,发现了两种背景颜色改变的方法,就总结了下. 方法一尝试了好多遍才好,要点在于,在sele ...
- jquery动态改变背景颜色插件
GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> ...
- div可以同时设置背景图片和背景颜色吗?
前言 当然可以同时设置 当图片背景色不透明时 情况一:当图片的长.宽 >= div的长.宽时 我们最终看到div背景是图片,之所以说是最终看到,是因为在页面加载时,我们先看到的div背景是颜色, ...
- CSS实例:鼠标滑过超级链接文字时改变背景颜色
先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...
随机推荐
- Hive入门及常用指令
基础命令show databases; # 查看某个数据库use 数据库; # 进入某个数据库show tables; # 展示所有表desc 表名; # 显示表结构show partitions 表 ...
- 转:c++ 11 新特性
声 明:本文源自 Danny Kalev 在 2011 年 6 月 21 日发表的<The Biggest Changes in C++11(and Why You Should Care)&g ...
- centos6.5编译安装gearmand Job Server(C)
1)下载安装包: wget https://launchpad.net/gearmand/1.2/1.1.12/+download/gearmand-1.1.12.tar.gz 2)安装编译器: yu ...
- http://www.yiibai.com/java8/java8_temporaladjusters.html
原文:http://www.yiibai.com/java8/java8_temporaladjusters.html TemporalAdjuster 是做日期数学计算.例如,要获得“本月第二个星期 ...
- iOS release版本去除NSLog打印信息
因为NSLog的输出还是比较消耗系统资源的,而且输出的数据也可能会暴露出App里的保密数据,所以发布正式版时需要把这些输出全部屏蔽掉. 我们可以在发布版本前先把所有NSLog语句注释掉,等以后要调试时 ...
- 【gradle】mac下 gradle默认本地仓库位置
gradle默认会把包缓存到用户目录的.gradle目录下,如果你打开.gradle\caches\modules-2\files-2.1,你会发现很多的jar包.mac上的话 ,也就是在/Users ...
- Error: cannot call methods on draggable prior to initialization; attempted to call
cannot call methods on draggable prior to initialization; attempted to call 报这个问题的根本原因是由于你的引用文件有问题 ...
- ASI和AFN实现POST异步请求的相同功能的代码
I'm a newbie in obj-c and have been using asihttp for some of my projects. When doing a post request ...
- python 字符串前缀
普通字符串 一般字符串都是已unicode编码,且和C类似,可以使用\来转义,比如 a = "test\ntest" print(a) 输出 test test 前面加r 在字符串 ...
- DTD复习笔记(复习资料为菜鸟教程里的DTD教程)
DTD(文档类型定义)的作用是定义 XML 文档的合法构建模块. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 为什么使用 DTD? 通过 DTD,您的每一个 XML 文件均可携带 ...