您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > Js+css實(shí)現(xiàn)鼠標(biāo)控制文字與圖片是否透明

Js+css實(shí)現(xiàn)鼠標(biāo)控制文字與圖片是否透明

來(lái)源：程序員人生發(fā)布時(shí)間：2014-01-11 02:50:53 閱讀次數(shù)：3157次

　　網(wǎng)(LieHuo.Net)教程圖片與文字結(jié)合的半透明效果，在正常狀態(tài)下，一張圖片的上面顯示文字，為了區(qū)分背景，文字下方又重新布置了一個(gè)DIV，該DIV是半秀明狀態(tài)，這樣可以看到背景也可以襯托文字，當(dāng)鼠標(biāo)放到文字上的時(shí)候，DIV層徹底不透明，文字清淅顯示出來(lái)，一般這種效果都是要配合JavaScript的，這樣兼容性會(huì)更好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>圖片與文字結(jié)合的半透明效果，鼠標(biāo)移上不透明 - liehuo.net</title><style type="text/css">.box{ width:600px; height:600px; padding:20px;}*{ margin:0; padding:0;}body{ background:url(http://www.jyygyx.com/uploads/allimg/091009/19413CP9-0.jpg) no-repeat; width:300px; height:235px;}.in_box{background:#fff; width:293px; background:rgba(255,255,255,0.4); filter:alpha(opacity=40); }.box .sub_con{ position:relative; color:#00F; width:100%;}.ff{background:#fff; width:293px; background:rgba(255,255,255,1); filter:alpha(opacity=100);}</style></head><body><div class="box"><div class="in_box" id="in_box"><p class="sub_con">提供互聯(lián)網(wǎng)資訊與教程，是站長(zhǎng)、程序員、網(wǎng)頁(yè)設(shè)計(jì)師等交流與學(xué)習(xí)的網(wǎng)絡(luò)平臺(tái)，一直堅(jiān)持為互聯(lián)網(wǎng)的發(fā)展提供動(dòng)力，熱情、積極、向上、不斷進(jìn)取是Liehuo.Net的座右銘，關(guān)注站長(zhǎng)，建設(shè)互聯(lián)網(wǎng)！</p></div></div><script type="text/javascript"> var hh=document.getElementById('in_box'); var bb; hh.onmouseover=function(){ bb=this.className; this.className='ff'; } hh.onmouseout=function(){ this.className=this.className.replace('ff',bb); }</script></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.jyygyx.com/' _fcksavedurl='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 Access入門教程 10.7 補(bǔ)充內(nèi)容四:IPmt函數(shù)

下一篇 SQL中一些不是很常用的SQL語(yǔ)句

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

Js+css實(shí)現(xiàn)鼠標(biāo)控制文字與圖片是否透明