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 相关控件的事件操作分解
Aug 03 Javascript
jqgrid 简单学习笔记
May 03 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
使用p5.js临摹动态图形
Oct 23 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 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
Javascript 类与静态类的实现
2010/04/01 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
JS判定是否原生方法
2013/07/22 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
js实现下一页页码效果
2017/03/07 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
vue解决跨域问题(推荐)
2020/11/10 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
如何查找网页漏洞
2016/06/22 面试题
写好自荐信要注意的问题
2013/11/10 职场文书
结婚典礼证婚词
2014/01/08 职场文书
倡议书格式模板
2014/05/13 职场文书
服务宗旨标语
2014/07/01 职场文书
化学教育专业求职信
2014/07/08 职场文书
新闻学专业求职信
2014/07/28 职场文书
运动会演讲稿100字
2014/08/25 职场文书
大学生简短的自我评价
2014/09/12 职场文书
小学教师年度个人总结
2015/02/05 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技