怎么通过hover改变一张图片的透明度？谢谢 你好，我想用hover把背景图片透明度改为0.5，css要怎...
CSS\u9f20\u6807\u7ecf\u8fc7\u56fe\u7247\u53d8\u4eae,\u79fb\u5f00\u53d8\u53d8\u6697\u6548\u679c\u4ee3\u7801\u600e\u4e48\u51991\u3001\u6253\u5f00hbuilder\uff0c\u5728\u7a7a\u767d\u7684html\u6587\u4ef6\u4e0a\u9762\u8bbe\u7f6e\u4e00\u4e2adiv\uff0c\u7ed9div\u4e00\u4e2aclass\u5e76\u547d\u540d\u4e3aimg\uff1a
2\u3001\u5728css\u91cc\u8bbe\u7f6eimg\u7684\u7c7b\u4e00\u5b9a\u7684\u5bbd\u548c\u9ad8\uff0c\u5f15\u5165\u793a\u4f8b\u56fe\u7247\uff0c\u8bbe\u7f6e\u56fe\u7247\u4e3a\u4e0d\u91cd\u590d\u3002\u5e76\u4e14\u7ed9img\u7684\u7c7b\u8bbe\u7f6e\u201c:hover\u201d\u4f2a\u7c7b\uff0c\u8bbe\u7f6e\u4f2a\u7c7b\u5185\u7684\u900f\u660e\u5ea6\u4e3a0.6\uff1a
3\u3001\u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u5728\u6d4f\u89c8\u5668\u5185\u67e5\u770b\u6548\u679c\uff1a
4\u3001\u5c06\u9f20\u6807\u79fb\u5165\u56fe\u7247\uff0c\u5c31\u4f1a\u53d1\u73b0\u56fe\u7247\u5df2\u7ecf\u53d8\u4eae\u4e86\u3002\u4ee5\u4e0a\u5c31\u662f\u7528CSS\u8bbe\u7f6e\u9f20\u6807\u7ecf\u8fc7\u56fe\u7247\u53d8\u4eae\uff0c\u79fb\u5f00\u53d8\u53d8\u6697\u6548\u679c\u7684\u6f14\u793a\uff1a
\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff0c\u517c\u5bb9\u5404\u79cd\u4e3b\u6d41\u6d4f\u89c8\u5668\uff1a
body:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
有两种思路：
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:after{visibility:hidden; display:block; font-size:0; content:'\20'; clear:both; height:0;}
.cle, .clearfix, .clear_f, .cle_float{*zoom:1}
.wrapper{margin:20px 0 0;width:520px;margin:100px auto 0;}
.wrapper .item,.wrapper .item2{float:left;margin:0 20px;}
.item a{display:block;width:100px;height:150px}
.item a .img01{display:block;}
.item a .img02{display:none}
.item a:hover .img01{display:none}
.item a:hover .img02{display:block;}
.item2 a{display:block;width:100px;height:150px;position:relative;}
.item2 a span{position: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 span{display: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中的图片在附件里
绛旓細1銆佸噯澶囧垏鎹鍥剧墖绱犳潗锛屼竴鑸槸涓ゅ紶锛屽鍥撅紝鏀惧叆img鏂囦欢澶癸紝璺烪TML鍚岀骇銆1銆傚噯澶囧垏鎹㈠浘鐗囩礌鏉愶紝涓鑸槸涓や釜锛屽鍥撅紝鏀惧湪img鏂囦欢澶归噷锛屽拰HTML涓涓绾у埆銆2銆佺劧鍚鐢img宓屽叆鍒扮綉椤碉紝宓屽叆鍏朵腑鐨涓寮锛屽彟澶栦竴寮犲緟浼氬垏鎹2.鐒跺悗鐢╥mg宓屽叆鍒扮綉椤典腑锛屽祵鍏ュ叾涓竴涓紝浠ュ悗鍐嶅垏鎹㈠彟涓涓3.濡傚浘锛岀幇鍦ㄦ槸闈欐佺殑锛岄紶鏍...
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv{height: 80px; background: url(small3.png)}div:hover{background: url(small2.png)}銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃禿iv鏄剧ず鐨勮儗鏅鍥剧墖鏄痵mall3.png銆4銆佸皢榧犳爣绉诲叆div锛屾鏃惰儗鏅浘鐗...
绛旓細1-鏄仛涓ゅ紶鍥撅紝涓寮犱笂鏈夐伄缃╋紝涓寮犳槸姝ｅ父鐨勫浘 2-涓涓猘鏍囩閲岋紝鏀句竴涓殣钘忕殑閫忔槑灞傦紝hover鏃舵帶鍒跺眰鐨勬樉绀洪殣钘 demo濡備笅锛<!DOCTYPE html> Examples {margin:0;padding:0;} .clear {clear:both; height:0; font-size:0; line-height:0; overflow:hidden;} .cle:after, .clearfix:aft...
绛旓細棣栧厛锛屼綘闇瑕佸仛涓涓眰銆傚叾娆＄敤JavaScript鍘绘帶鍒惰繖涓眰鐨勬樉绀猴細褰揌OVER鏃讹紝璋冪敤鐩稿簲鐨勬樉绀哄嚱鏁帮紝鍚﹀垯灏辫皟鐢ㄩ殣钘忓嚱鏁般傚氨杩欎箞绠鍗
绛旓細鍦╠w閲屽氨鍙互浜嗗湪琛屼负閲屼娇鐢ㄥ垏鎹鍥剧墖锛屽湪瀵硅瘽妗嗛噷閫夋嫨浣犻渶瑕佸垏鎹㈢殑鍥剧墖灏卞彲浠ヤ簡銆
绛旓細榧犳爣绉诲叆绉诲嚭鍥剧墖鍒囨崲寰堝父瑙佺殑锛岄偅鎴戜滑灏辨潵璇磋瀹冪殑瀹炵幇鏂规硶锛氱涓绉嶆柟娉曪紝涔熸槸鏈绠鍗曠殑涓绉嶏紝鍦╤tml閲屽氨鍙疄鐜板厛榛樿涓寮犲浘鐗锛岀劧鍚庡湪鍐欏浘鐗囩Щ鍏ョЩ鍑虹殑鍥剧墖銆傜浜岀鏂规硶锛宩s鏇挎崲function mouseOver() {document.image1.src = "img/HBuilder.png"}function mouseOut() {document.image1.src = "img...
绛旓細鐢╤over浼被鏉ュ仛 鍋氬ソ鏄粰鍥剧墖鍔犱互涓爣绛撅紝鐒跺悗瀵规爣绛捐缃甴over 渚嬪涓涓浘鐗 绉讳笂鍘荤殑鍥剧墖鍙玥over.jpg 涓や釜鍥剧墖澶у皬涓鏍 鏀瑰啓鎴 鍐嶅湪css涓坊鍔 example{ background:url('example.jpg') no-repeat; display:block; width:100px; height:100px;} example:hover{ background:url('hover.jpg') ...
绛旓細鐢╤over浼被鏉ュ仛 鍋氬ソ鏄粰鍥剧墖鍔犱互涓爣绛撅紝鐒跺悗瀵规爣绛捐缃甴over 渚嬪涓涓浘鐗 绉讳笂鍘荤殑鍥剧墖鍙玥over.jpg 涓や釜鍥剧墖澶у皬涓鏍 鏀瑰啓鎴 鍐嶅湪css涓坊鍔 example{ background:url('example.jpg') no-repeat; display:block; width:100px; height:100px;} example:hover{ background:url('hover.jpg') ...
绛旓細鐢$('selector').arrt('src','img.png')鏀瑰彉鍥剧墖鍦板潃锛
绛旓細1棣栧厛杈撳叆浠ｇ爜涓嬫柟鐨勪唬鐮侊細<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CSS瀹炵幇榧犳爣绉诲姩鍒鍥剧墖锛屾洿鎹㈠浘鐗 2銆佺劧鍚庤緭鍏ヤ笅鏂圭殑浠ｇ爜锛 { margin:0; padding:0;} ul li{ list-style:none;} .nav{ w...
