最近项目里需要实现这么个功能 类似网游中的聊天框 背景都是透明的 但是文字是不透明 所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的 会造成全部透明
解决办法如下
实现完全透明
设置background为transparent即可 两个浏览器通用
实现透明度可调节
要求改透明度 这里IE和非IE需要分开处理
非IE浏览器可通过支持CSS 的方式处理（不支持CSS 的这里忽略了） css的写法是
background color:rgba( )
前面 个参数是RGB 最后个是透明度
IE浏览器需要使用gradient滤镜 css写法是
filter: progid:DXImageTransform Microsoft gradient(startColorstr=# ffffff endColorstr=# ffffff)
摘录CSS手册说明用法
语法
filter : progid:DXImageTransform Microsoft Gradient ( enabled= bEnabled startColorStr= iWidth endColorStr= iWidth )
属性
enabled : 可选项 布尔值(Boolean) 设置或检索滤镜是否激活 true | false true : 默认值 滤镜激活
false : 滤镜被禁止
startColorStr : 可选项 字符串(String) 设置或检索色彩渐变的开始颜色和透明度
其格式为 #AARRGGBB AA RR GG BB 为十六进制正整数 取值范围为 – FF RR 指定红色值 GG 指定绿色值 BB 指定蓝色值 参阅 #RRGGBB 颜色单位 AA 指定透明度 是完全透明 FF 是完全不透明 超出取值范围的值将被恢复为默认值
取值范围为 #FF – #FFFFFFFF 默认值为 #FF FF 不透明蓝色
EndColorStr : 可选项 字符串(String) 设置或检索色彩渐变的结束颜色和透明度 参阅 startColorStr 属性 默认值为 #FF 不透明黑色
特性
Enabled : 可读写 布尔值(Boolean) 参阅 enabled 属性
GradientType : 可读写 整数值(Integer) 设置或检索色彩渐变的方向 | : 默认值 水平渐变
: 垂直渐变
StartColorStr : 可读写 字符串(String) 参阅 startColorStr 属性
StartColor : 可读写 整数值(Integer) 设置或检索色彩渐变的开始颜色 取值范围为 – 为透明 为不透明白色
EndColorStr : 可读写 字符串(String) 设置或检索色彩渐变的结束颜色和透明度 参阅 startColorStr 属性 默认值为 #FF 不透明黑色
EndColor : 可读写 整数值(Integer) 设置或检索色彩渐变的结束颜色 取值范围为 – 为透明 为不透明白色 当在脚本中使用此特性时 也可以用十六进制格式 xAARRGGBB
说明
在对象的背景和内容之间显示定制的色彩层
当此效果通过转变显示时 在渐变册色彩层之上的文本程序性的初始化为透明的 当色彩渐变实现后 文本颜色会以其定义的值更新
补充完美支持IE 和IE
这么写在IE 和IE 中会有点小问题 原因是使用transparent的背景时 鼠标居然能点到透明层后面的内容 还会造成部分事件的实效 解决办法是在外面套个div 然后给他加个完全透明的背景图（PNG） 写法参考
background:url( )!importantbackground:none_filter:progid:DXImageTransform Microsoft AlphaImageLoader(src= sizingMethod= scale
这样在里面被嵌套的div点击就不会点到最外面的内容了 当然非IE就不需要加这个了
另外 对于不支持CSS 的浏览器 还有个解决办法就是把背景层和显示文字的层分开处理 放在同一级 只是通过位置上的调整做到看似有层级关系 这样使用透明效果就直接做也不会对文字有影响了
补充
IE 下 上述办法仍然无效 解决办法是套层iframe 在代码里可以这么写
lishixinzhi/Article/program/Java/JSP/201311/19841效果预览
html中-css中 - 以ul 和 li标签双层结构为例
js中
1,定义一个init方法, 完成处理数据 并把最后选中的数据返回
1.通过getArr方法, 挂载了li元素的点击事件liClick方法, 并返回处理好的数据arr,checkbox的话arr里面是多条选中的,radio则为单条
通过array的特性来达到return返回的数据同步
2.根据传递过来的type类型判断是单选框还是复选框, 来调用不同的处理函数checkboxFun或radioFun
3.checkboxFun完成了复选框的一些数据处理操作 , , radioFun 完成了单选框的一些数据处理操作
2, 获取子元素集合, 并调用init函数,
init函数调用并会返回一个newArr, 这个newArr就是最新的数据集合
这样就可以实现一个单选多选的功能了
自动滚动，主要思路是用js自带的setInterval方法。
定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
简单的例子，仅供参考：
<style>*{ margin:0 padding:0 list-style:none}
#box{ width:840px border:1px solid #000 height:210px margin:30px auto position:relative overflow:hidden}
#box ul{ position:absolute left:0 top:0}
#box ul li{ width:200px height:200px float:left padding:5px}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box')
var oUl=oBox.children[0]
var aLi=oUl.children
//复制一份内容
oUl.innerHTML+=oUl.innerHTML
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'
setInterval(function(){
var l=oUl.offsetLeft+10
if(l>=0){
l=-oUl.offsetWidth/2
}
oUl.style.left=l+'px'
},30)
}
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg" width="200"></li>
<li><img src="img/2.jpg" width="200"></li>
<li><img src="img/3.jpg" width="200"></li>
<li><img src="img/4.jpg" width="200"></li>
</ul>
</div>
</body>
