php网页如何做出透明的效果,css+filter实现简单的图片透明效果

完成简单的透明度控制功能

使用filter的功能对图片元素进行透明度控制。

支持IE8，Chrome浏览器。

复制代码代码如下:

/*透明20%*/

.opacity-20 {

filter:alpha(opacity=20); /*支持IE浏览器的filter*/

-webkit-filter:opacity(0.2); /*支持chrome浏览器filter*/

}

/*不透明*/

.opacity-100 {

filter:alpha(opacity=100);

-webkit-filter:opacity(1);

}

function makevisible(cur,which){

//交替设置不带透明度和带透明度的css

//完成鼠标移进图片则不透明显示，鼠标移出则带透明度显示

if (which==0) {

cur.className = 'opacity-100';

}else{

cur.className = 'opacity-20';

}

以上就是本文的全部内容了，代码很简洁，实现的效果却非常好，希望对大家能所帮助。

php网页如何做出透明的效果,css+filter实现简单的图片透明效果相关推荐

html图片自带闪光效果,CSS实现的一闪而过的图片闪光效果
只需要两个HTML元素和一个CSS变换,我就能创造出我自己的闪光效果.让我们来实现它! 呈现光泽图片下面就是这张Addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些. 注意:左边 ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
【css技巧】CSS filter的神奇用法 | 褪色|融合效果等
前言 css3的filter可以修改图片的可视效果,用的好堪比美图秀秀,做出来的网页非常炫酷,装上一个大比! 但是也不能滥用,毕竟兼容性摆在那里,用多了还可能卡. 你们看看,一张图加了filter效果 ...
php鼠标悬停显示图片,HTML CSS 实现鼠标悬停时图片拉近效果
前言为了让网页的使用体验更好,我们会让网页的某些元素对鼠标的动作做出响应.例如鼠标滑过.单击按钮的时候按钮变色.变形.之前在很多网页上看到了鼠标滑过一个图片链接时图片放大.拉近的效果,今天尝试实现一 ...
html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...
闪光css,CSS实现的一闪而过的图片闪光效果
只需要两个html元素和一个css变换,我就能创造出我自己的闪光效果.让我们来实现它! 呈现光泽图片下面就是这张addy在他博客上使用的图片: 比我需要的要大一些,但你可以把它裁剪一些. 注意:左边 ...
html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果此时的效果是这样的: 分析: 背景颜色图片的位置图片的边框.圆角以及阴影让图片动起来 index.css代码: * ...

php网页如何做出透明的效果,css+filter实现简单的图片透明效果

php网页如何做出透明的效果,css+filter实现简单的图片透明效果相关推荐

最新文章

热门文章