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 实现的自定义对话框
Mar 24 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
ES5和ES6中类的区别总结
Dec 21 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+jQuery 注册模块开发详解
2014/10/14 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
Python中分数的相关使用教程
2015/03/30 Python
Django如何配置mysql数据库
2018/05/04 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
中学生家长评语大全
2014/04/16 职场文书
安全例会汇报材料
2014/08/23 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android