Dreamweaver中可以實現(xiàn)鼠標經(jīng)過圖片時圖片漸漸變暗效果，該怎么制作這個效果呢？下面我們就來看看詳細的教程。

1、新建一個html文檔，然后ctrl+s保存到站點

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

3、在div再建立一個塊狀標簽，新建立的h1和img是同級，都是div的子集，

4、在style中輸入div屬性：

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

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

5、對圖片欄進行設(shè)置：

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

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

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

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

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

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

8、然后添加偽類效果：

div:hover h1{opacity:0.6;}

鼠標經(jīng)過div時，h1慢慢顯現(xiàn)，造成圖片慢慢變黑的效果

以上就是dw中制作鼠標經(jīng)過圖片變暗效果的教程，希望大家喜歡，