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 相关文章推荐
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
React 组件间的通信示例
Jun 14 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 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多任务程序实例解析
2014/07/19 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
smarty自定义函数用法示例
2016/05/20 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
php探针不显示内存解决方法
2019/09/17 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
js获取单选按钮的数据
2006/11/27 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
python 多进程通信模块的简单实现
2014/02/20 Python
Python 查看文件的读写权限方法
2018/01/23 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
市场部专员岗位职责
2013/11/30 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
mysql主从复制的实现步骤
2021/10/24 MySQL