溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了DW如何制作鼠標經過圖片漸漸變暗效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Dreamweaver中可以實現鼠標經過圖片時圖片漸漸變暗效果，該怎么制作這個效果呢？
1、新建一個html文檔，然后ctrl+s保存到站點
2、在body建立div標簽，在div中插入一張圖片，如下圖所示
3、在div再建立一個塊狀標簽，新建立的h2和img是同級，都是div的子集，
4、在style中輸入div屬性：
div{width:400px;margin:0 auto;position:relative;}
設置固定寬度400px,高度由子集撐起來，所以高度不用設置，對div添加相對定位
5、對圖片欄進行設置：
img{display:block;width:100%;}
將圖片轉為塊狀，設置寬度何父集一樣寬
6、然后對h2進行設置，將h2覆蓋在圖片上方，寬度和高度都設置為100%，調整不透明度，相對定位：margin:0;去掉h2本身帶有的屬性
h2{position:absolute;width:100%;height:100%;background-color:black;top:0;left:0;opacity:0.5;margin:0;}；
現在這種效果就是鼠標移動過去后，顯示的最終效果；
7、現在要的效果是，鼠標經過圖片時，慢慢變黑的，所以可以先將不透明度設置為0，然后鼠標經過時，慢慢顯現
8、然后添加偽類效果：
div:hover h2{opacity:0.6;}
鼠標經過div時，h2慢慢顯現，造成圖片慢慢變黑的效果
感謝你能夠認真閱讀完這篇文章，希望小編分享的“DW如何制作鼠標經過圖片漸漸變暗效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
