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 覆盖和重载 函数
Sep 25 Javascript
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
vue如何进行动画的封装
Sep 26 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
Typescript类型系统FLOW静态检查基本规范
May 25 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
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
原生js开发的日历插件
2017/02/04 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
机器学习python实战之手写数字识别
2017/11/01 Python
Python实现多属性排序的方法
2018/12/05 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python线程指南分享
2019/11/19 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
安全生产计划书
2014/05/04 职场文书
公司考勤管理制度
2015/08/04 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
MySQL空间数据存储及函数
2021/09/25 MySQL
JavaScript流程控制(分支)
2021/12/06 Javascript