這篇文章主要介紹了DW如何制作鼠標(biāo)經(jīng)過圖片漸漸變暗效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專注成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)站營銷推廣，申請(qǐng)域名，網(wǎng)絡(luò)空間，成都網(wǎng)站托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，請(qǐng)聯(lián)系創(chuàng)新互聯(lián)公司。

Dreamweaver中可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片時(shí)圖片漸漸變暗效果，該怎么制作這個(gè)效果呢？

1、新建一個(gè)html文檔，然后ctrl+s保存到站點(diǎn)

2、在body建立div標(biāo)簽，在div中插入一張圖片，如下圖所示

3、在div再建立一個(gè)塊狀標(biāo)簽，新建立的h2和img是同級(jí)，都是div的子集，

4、在style中輸入div屬性：

div{width:400px;margin:0 auto;position:relative;}

設(shè)置固定寬度400px,高度由子集撐起來，所以高度不用設(shè)置，對(duì)div添加相對(duì)定位

5、對(duì)圖片欄進(jìn)行設(shè)置：

img{display:block;width:100%;}

將圖片轉(zhuǎn)為塊狀，設(shè)置寬度何父集一樣寬

6、然后對(duì)h2進(jìn)行設(shè)置，將h2覆蓋在圖片上方，寬度和高度都設(shè)置為100%，調(diào)整不透明度，相對(duì)定位：margin:0;去掉h2本身帶有的屬性

h2{position:absolute;width:100%;height:100%;background-color:black;top:0;left:0;opacity:0.5;margin:0;}；

現(xiàn)在這種效果就是鼠標(biāo)移動(dòng)過去后，顯示的最終效果；

7、現(xiàn)在要的效果是，鼠標(biāo)經(jīng)過圖片時(shí)，慢慢變黑的，所以可以先將不透明度設(shè)置為0，然后鼠標(biāo)經(jīng)過時(shí)，慢慢顯現(xiàn)

8、然后添加偽類效果：

div:hover h2{opacity:0.6;}

鼠標(biāo)經(jīng)過div時(shí)，h2慢慢顯現(xiàn)，造成圖片慢慢變黑的效果

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“DW如何制作鼠標(biāo)經(jīng)過圖片漸漸變暗效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)頁名稱：DW如何制作鼠標(biāo)經(jīng)過圖片漸漸變暗效果-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/ehegs.html