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 相关文章推荐
html中table数据排序的js代码
Aug 09 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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
PHPLog php 程序调试追踪工具
2009/09/09 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php中stdClass的用法分析
2015/02/27 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
基于php实现的验证码小程序
2016/12/13 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
js运动应用实例解析
2015/12/28 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python发腾讯微博代码分享
2014/01/10 Python
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python读取文件名称生成list的方法
2018/04/27 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
中国电视购物:快乐购
2017/02/04 全球购物
我的中国梦演讲稿600字
2014/08/19 职场文书
党委班子对照检查材料
2014/08/19 职场文书
单位实习鉴定评语
2015/01/04 职场文书
邀请函怎么写
2015/01/30 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
创业计划书之美甲店
2019/09/20 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
Python+tkinter实现高清图片保存
2022/03/13 Python