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页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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 db类库进行数据库操作
2009/03/19 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
详解AngularJS 过滤器的使用
2018/06/02 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python计算auc指标实例
2017/07/13 Python
python绘制双柱形图代码实例
2017/12/14 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
详解python深浅拷贝区别
2019/06/24 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
作风转变年心得体会
2014/10/22 职场文书
个人年终总结怎么写
2015/03/09 职场文书
Python基础之条件语句详解
2021/06/16 Python
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技