ie7+背景透明文字不透明超级简单的实现方法


Posted in Javascript onJanuary 17, 2014

如果你现在还在为背景透明文字不透明而发愁的话,建议你来看看。当然IE6我已经放弃了,所以不要说不用PNG8的图片这样在IE6下没有效果,当然你也可以用滤镜。本人不建议使用滤镜。因为这样可能会出现其它问题!(如无法点击等等问题)做前端最怕的就是BUG,特别是IE6。滚蛋IE6!
本文的核心就是利用PNG32透明图片来做背景然后平铺背景就行了。这样就不会存在背景透明文字也透明了。这样做起来超级简单你们说呢!
图片只需要调整透明度即可。
在PSD中把图片设置为20%的透明度保存为png就行了。
(切忌:不要设置模式为灰度。这样会变成png8了。而且没有透明度。)
背景透明,文字不透明。哈哈。IE 6滚蛋啦!支持:IE7.0+/FF3.0+/Opera10+/Chrome/Safari 。均测试通过。
效果图如下:

ie7+背景透明文字不透明超级简单的实现方法

完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ie7+背景透明,文字不透明超级简单的方法</title>
<style>
p{margin:0;padding:0;}
.bg{width:280px;padding:5px;margin:10px 0 10px;}
.bg1{background:#000;color:#fff;}
.bg2{background:#f60;}
.com{background:url(http://images/css_bg.png) repeat 0 0;border:1px solid #eee;border-radius:5px;font-size:12px;padding:5px;line-height:20px;}
</style>
</head>
<body>
 <div class="bg bg1">
  <div class="com"><p>背景透明,文字不透明。哈哈。IE 6滚蛋啦<br />支持:<br />IE7.0+/FF3.0+/Opera10+/Chrome/Safari <br />均测试通过。透明度为:20%</p></div>
 </div>
 <div class="bg bg2">
  <div class="com"><p>背景透明,文字不透明。哈哈。IE 6滚蛋啦<br />支持:<br />IE7.0+/FF3.0+/Opera10+/Chrome/Safari <br />均测试通过。透明度为:20%</p></div>
 </div>
</body>
</html>
Javascript 相关文章推荐
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 #Javascript
Jquery 获取对象的几种方式介绍
Jan 17 #Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 #Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 #Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 #Javascript
js使用eval解析json(js中使用json)
Jan 17 #Javascript
js window.open弹出新的网页窗口
Jan 16 #Javascript
You might like
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP源代码数组统计count分析
2011/08/02 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php中动态调用函数的方法
2015/03/16 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python机器学习之决策树算法
2017/12/22 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
工地资料员岗位职责
2013/12/31 职场文书
聚美优品的广告词
2014/03/14 职场文书
现实表现材料范文
2014/12/23 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书