图片与文字半透明效果 鼠标移上不透明
2009-10-18 00:58
796 查看
该 DIV是半秀明状态,这样可以看到背景也可以衬托文字,当鼠标放到文字上的时候,DIV层彻底不透明,文字清淅显示出来,一般这种效果都是要配合JavaScript的,这样兼容性会更好。
图片与文字结合的半透明效果,鼠标移上不透明 .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(//files.jb51.net/demoimg/200910/wall.gif) no-repeat; width:300px; height:235px;} .in_box{background:#fff; width:293px; background:rgba(255,255,255,0.4); filter:alpha(opacity=40); } .box .sub_con{ position:relative; color:#00F; width:100%;} .ff{background:#fff; width:293px; background:rgba(255,255,255,1); filter:alpha(opacity=100);}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
图片与文字结合的半透明效果,鼠标移上不透明 .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(//files.jb51.net/demoimg/200910/wall.gif) no-repeat; width:300px; height:235px;} .in_box{background:#fff; width:293px; background:rgba(255,255,255,0.4); filter:alpha(opacity=40); } .box .sub_con{ position:relative; color:#00F; width:100%;} .ff{background:#fff; width:293px; background:rgba(255,255,255,1); filter:alpha(opacity=100);}
脚本之家(//www.jb51.net)提供各类编程源码、书籍教程、JavaScript/CSS特效代码等,做有质量的学习型网站。
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- 图片与文字半透明效果 鼠标移上不透明
- 鼠标移上图片放大弹出文字半透明图层效果
- 半透明图片效果,鼠标移动上去就透明,支持Firefox/IE
- ps制作玻璃效果(整体透明且上为白色半透明下为无色透明)的PNG格式背景图片
- javaScript---图片渐显效果和文字大小变化之鼠标响应事件
- css为图片添加说明文字——带透明效果
- 鼠标经过图片时显示半透明文字.net
- 鼠标经过图片变成文字的效果
- C# 鼠标拖放图片透明缩略图效果实现思路
- 看截图:给图片罩上一层半透明文字描述效果(一)DIV+CSS+SPAN 借鉴百度图片附着文字效果
- Gdi+绘制半透明文字并保存为透明背景图片
- 非常漂亮的图片展示效果,倒影,可以用用鼠标中键滚动,半透明的效果,也很方便改为动态的,带图
- 鼠标滑过图片显示半透明文字,边框变色代码
- 鼠标经过图片时显示半透明文字,边框变色
- 让png格式图片在网页中透明显示,让IE8支持半透明效果滤镜
- 图片鼠标透明效果
- 鼠标移动显示 div 图片 文字效果
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
- js和css两种实现鼠标经过图片时显示透明框的遮罩条文字
- 55-002-1 HTML5图片列表页面的制作 鼠标移动图片动态显示,文字动态阴影效果,渐变效果 列表前增加样式序列号