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 27 Javascript
犀利的js 函数集合
Jun 11 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
JS数组去重与取重的示例代码
Jan 24 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
js数组去重的方法总结
Jan 18 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
用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 session有效期问题
2009/04/26 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
Python实现命令行通讯录实例教程
2016/08/18 Python
详谈python http长连接客户端
2017/06/12 Python
python实现m3u8格式转换为mp4视频格式
2018/02/28 Python
浅述python中深浅拷贝原理
2018/09/18 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python学生管理系统开发
2019/01/30 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
为什么说python更适合树莓派编程
2020/07/20 Python
普通员工辞职信
2014/01/17 职场文书
学校门卫管理制度
2014/01/30 职场文书
节水口号标语
2014/06/19 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
MYSQL如何查看进程和kill进程
2022/03/13 MySQL