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

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

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

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

4、在style中輸入div屬性：

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

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

5、對圖片欄進行設置：

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

將圖片轉為塊狀，設置寬度何父集一樣寬

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

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

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

7、現在要的效果是，鼠標經過圖片時，慢慢變黑的，所以可以先將不透明度設置為0，然后鼠標經過時，慢慢顯現

8、然后添加偽類效果：

div:hover h1{opacity:0.6;}

鼠標經過div時，h1慢慢顯現，造成圖片慢慢變黑的效果

以上就是dw中制作鼠標經過圖片變暗效果的教程，希望大家喜歡，請繼續關注武林網。

相關推薦：

DreamWeaver中p標簽br標簽怎么使用?

Dreamweaver圖像怎么通過img標簽定義高寬?

dreamweaver怎么制作文本框? dw文本框的兩種制作方法