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+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python爬取个性签名的方法
2018/06/17 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
浅谈django 重载str 方法
2020/05/19 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
省三好学生申请材料
2014/01/22 职场文书
个性发展自我评价
2014/02/11 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
教师节倡议书
2014/08/30 职场文书
2015年新教师工作总结
2015/04/28 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Python中json.dumps()函数的使用解析
2021/05/17 Python
swagger如何返回map字段注释
2021/07/03 Java/Android