CSS教程:opacity控制图片透明效果

文章目录

题记

由于最近暗淡的黑在写淘宝SDK模板,周末又兼顾摄影,所以很少有时间来更新网站了。但依旧在学习,在学习的过程中如果碰到什么问题,回来着继续记录下来的。今天记录的是在写模板的时候,要实现的一个效果:CSS元素中的opacity来控制图片透明效果。

效果演示

首先我们来先看下CSS样式控制图片透明效果:

1.正常情况下,图片以100%像素显示;

CSS控制图片透明效果

2.鼠标移动到图片上时,控制图片透明程度来达到悬浮效果。

CSS控制图片透明效果

实现方法

在css样式中,控制图像透明度的元素为opacity,即不透明度。可以控制此元素的参数来实现图片的透明效果。代码如下:

1
2
3
4
5
6
7
8
9
10
img
{
opacity:0.4; /* 此写法针对FF、chorme等其他浏览器 */
filter:alpha(opacity=40); /* 此写法针对IE8及更早版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}

PS:opacity范围为0.1-1.0;filter:alpha(opacity=)范围为1-100

声明:本站除特别声明外,均为本站原创,转载请注明出处:暗淡的黑IT网络,谢谢!