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 相关文章推荐
javascript 自定义事件初探
Aug 21 Javascript
javascript事件模型实例分析
Jan 30 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
JavaScript中reduce()的用法
May 11 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
PHP音乐采集(部分代码)
2007/02/14 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python制作小说爬虫实录
2017/08/14 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
深入浅析Python中的迭代器
2019/06/04 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
语文教学随笔感言
2014/02/18 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
党员教师工作决心书
2014/03/13 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
开学典礼观后感
2015/06/15 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL