怎么通过hover改变一张图片的透明度？谢谢
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么通过hover改变一张图片的透明度？谢谢相关的知识，希望对你有一定的参考价值。
参考技术A 用css的a:hover完全可以做到有两种思路：
1-是做两张图，一张上有遮罩，一张是正常的图
2-一个a标签里，放一个隐藏的透明层，hover时控制层的显示隐藏
demo如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css" media="screen">
*margin:0;padding:0;
.clear clear:both; height:0; font-size:0; line-height:0; overflow:hidden;
.cle:after, .clearfix:after, .clear_f:after, .cle_float:aftervisibility:hidden; display:block; font-size:0; content:'\20'; clear:both; height:0;
.cle, .clearfix, .clear_f, .cle_float*zoom:1
.wrappermargin:20px 0 0;width:520px;margin:100px auto 0;
.wrapper .item,.wrapper .item2float:left;margin:0 20px;
.item adisplay:block;width:100px;height:150px
.item a .img01display:block;
.item a .img02display:none
.item a:hover .img01display:none
.item a:hover .img02display:block;
.item2 adisplay:block;width:100px;height:150px;position:relative;
.item2 a spanposition:absolute;top:0;left: 0;bottom:0;right:0;z-index: 5;background-color:#000;filter:alpha(opacity=60); /*IE滤镜，透明度50%*/-moz-opacity:0.6; /*Firefox私有，透明度50%*/opacity:0.6;/*其他，透明度50%*/
.item2 a:hover spandisplay:none
</style>
</head>
<body>
<!-- begin:demo1 -->
<div class="wrapper clearfix">
<div class="item">
<a href="#">
<img src="demo.jpg" class="img01" />
<img src="demo-hover.jpg" class="img02" />
</a>
</div>
<div class="item">
<a href="#">
<img src="demo.jpg" class="img01" />
<img src="demo-hover.jpg" class="img02" />
</a>
</div>
<div class="item">
<a href="#">
<img src="demo.jpg" class="img01" />
<img src="demo-hover.jpg" class="img02" />
</a>
</div>
</div>
<!-- end:demo1 -->
<!-- begin:demo1 -->
<div class="wrapper clearfix">
<div class="item2">
<a href="#">
<img src="demo-hover.jpg" class="img02" />
<span></span>
</a>
</div>
<div class="item2">
<a href="#">
<img src="demo-hover.jpg" class="img02" />
<span></span>
</a>
</div>
<div class="item2">
<a href="#">
<img src="demo-hover.jpg" class="img02" />
<span></span>
</a>
</div>
</div>
<!-- end:demo1 -->
</body>
</html>
如果想要做“渐变”的效果，在a标签里加上
-webkit-transition:color .2s;-moz-transition: color .2s;-o-transition: color .2s; -ms-transition: color .2s;transition: color .2s
并且domo里所有的display:block和display:none都换成透明度opacity属性来做即可
demo中的图片在附件里本回答被提问者和网友采纳
图片透明处理的方法
版权声明：本文为博主原创文章，未经博主允许不得转载。
图片的透明性，由其属性‘Alpha’ 决定,所以改变图像的‘Alpha‘值则改变透明度
Alpha为与图像分辨率相同大小的矩阵，0为透明，1为不透明。保存图片时，如要保存为
透明图片，须保存为png格式，保存代码为：imwrite(I,\'图像名.png\',\'Alpha\',alpha)
举例：一张字图片，背景为白色，字为黑色，现在将其处理后，输出为字为红色，背景为透明的图片。
MATLAB实现的代码如下：
%字变为红色，背景变为白色，保存背景为透明的图片
MATLAB实现代码如下：
I=imread(fname1);
mask=rgb2gray(I);
mask1=im2bw(mask);
mask1=~mask1;
y = sum(mask1,2);
indices = find(y>0);
y_up = indices(1);
y_down = indices(end);
x = sum(mask1,1);
indices1 = find(x>0);
x_up = indices1(1);
x_down = indices1(end);
BW=I(y_up:y_down,x_up:x_down);
figure;imshow(BW);
imwrite(BW, \'F:\\boss\\HeartLungSegment_RadiographicIndexComputation\\dtouming.png \',\'png\');
[h,w]=size(BW);
ima=imadjust(mask); %调节灰度图像的亮度或彩色图像的颜色矩阵
bw=im2bw(ima); %二值化默认值是0.5
level=graythresh(mask); %使用最大类间方差法找到图片的一个合适的阈值
bw2=im2bw(ima,level);
bw4 =bwareaopen(bw3, 20);
bw5=~bw4;
R=I(y_up:y_down,x_up:x_down,1);%矩阵的拆分，所有行列的第1个值
G=I(y_up:y_down,x_up:x_down,2);
B=I(y_up:y_down,x_up:x_down,3);
rgb=cat(3,R,G,B); %构建矩阵，3为矩阵的维数
figure,imshow(rgb)
%透明度
siz=size(BW);
alpha=ones(siz(1),siz(2));
alpha(G==255)=0; %取背景部分0 0为透明
imwrite(rgb,\'透明.png\',\'Alpha\',alpha);
结果如下：
原图
处理后的图像
以上是关于怎么通过hover改变一张图片的透明度？谢谢的主要内容，如果未能解决你的问题，请参考以下文章
请问鼠标滑过背景图片，图片围绕圆心旋转的效果怎么实现？css3也可以..