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 相关文章推荐
解析JavaScript中的不可见数据类型
Dec 02 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
javascript html5实现表单验证
Mar 01 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
js实现分割上传大文件
2016/03/09 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
python动态网页批量爬取
2016/02/14 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
财务部岗位职责
2013/11/19 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
青年文明号汇报材料
2014/12/23 职场文书
初三语文教学计划
2015/01/22 职场文书
感动中国何玥观后感
2015/06/02 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers
Windows7下FTP搭建图文教程
2022/08/05 Servers