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 Object与Function使用
Jan 11 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
用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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
师说教学反思
2014/02/07 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
python之基数排序的实现
2021/07/26 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server