CSS opacity-实现图片半透明效果

2016-02-19 19:46 15 1 收藏

人生本是一个不断学习的过程，在这个过程中，图老师就是你们的好帮手，下面分享的CSS opacity-实现图片半透明效果懂设计的网友们快点来了解吧！

【 tulaoshi.com - Web开发】

img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"

　　在IE中需要通过"filter"来定义透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。针对IE的设定：this.filters.alpha.opacity=50　而针对Mozilla的设定：this.style.MozOpacity=0.5.　大家可以直接用这行代码给图片定义，只须修改图片地址就能实现上图效果。

来源:http://www.tulaoshi.com/n/20160219/1621757.html

上一篇： Oracle诊断案例-redo log处于高激活
下一篇： CSS去掉点击时的虚线

看过《CSS opacity-实现图片半透明效果》的人还看了以下文章更多>>

Vista 5342 Glass半透明效果图

标签： windows 操作系统

我们知道微软为Windows Vista设计了出色的Glass半透明效果，这种GUI效果需要显卡硬件支持DirectX 9，微软在之前出货的Windows Vista当中默认开启Glass效果（只要DX9显卡安装好正确的WDDM驱动程序）。但是在最新的发布的Windows Vista 5342当中，微软不知出于什么原因，默认关闭了Glass效果。因此我们需要手动将Glass效果打开，在安装好DX9显...

精美半透明蜡烛

标签： PS PS教程

Photoshop并不仅仅限于在图片处理方面的“锦上添花”，它同样也可以“无中生有”地绘制很多精彩的写实物品，比如下面这支精美逼真的蜡烛。完成效果如下：绘制步骤：在Photoshop中先描绘外形，用渐变填充…… 大致勾出颜色较深的部位；转换成选区后适当羽化，用Ctrl+M调整曲线。先将RGB三通道(默认...

ps制作手绘半透明瓶装饮品图片的方法

瓶子的材质是塑料的，透明感较强，绘制之前可以找一些实物图参考一下，尽量多分解一下构成，找出质感、立体感及高光等的刻画方法。最终效果 1、先用钢笔工具勾出轮廓。 2、液体颜色：#c59b77。 3、喝了半瓶的液体部分要增加一些模糊。 4、开始上高光：高光...

用css实现图片替换

标签： Web开发

style h2{font-size:14px; font-weight:bold; padding:10px 0; margin:5px 0; border-bottom:1px solid #ccc;} .box2{} .box2 img{display:block; padding:2px; border:0;} .box2 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;} .box2 a span{display:...

实现透视效果用css来实现

标签： Web开发

今天萌发一个想法，用css来实现透视效果。起初，我想到的是我们常见的添加阴影效果的方法，用多个div通过偏移来实现，但这需要很多 div，不够理想。随后，我想到css的一个属性：border，在border相连接处可以产生对角线效果。这样用两个div就可以实现，我们先看看，然后再分析实现过程。首先，我们看看border如何生成的对角线效果，在你的...

查看更多精彩>>