DW怎么制作鼠標(biāo)經(jīng)過圖片漸漸變暗效果?
我要評論Dreamweaver中可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片時圖片漸漸變暗效果，該怎么制作這個效果呢？下面我們就來看看詳細(xì)的教程。
Adobe Dreamweaver CC 2018 V18.0 中文/英文安裝版 32/64位
- 類型：網(wǎng)頁設(shè)計(jì)
- 大?。?/span>968MB
- 語言：簡體中文
- 時間：2017-10-19
1、新建一個html文檔，然后ctrl+s保存到站點(diǎn)
2、在body建立div標(biāo)簽，在div中插入一張圖片，如下圖所示
3、在div再建立一個塊狀標(biāo)簽，新建立的h1和img是同級，都是div的子集，
4、在style中輸入div屬性：
div{width:400px;margin:0 auto;position:relative;}
設(shè)置固定寬度400px,高度由子集撐起來，所以高度不用設(shè)置，對div添加相對定位
5、對圖片欄進(jìn)行設(shè)置：
img{display:block;width:100%;}
將圖片轉(zhuǎn)為塊狀，設(shè)置寬度何父集一樣寬
6、然后對h1進(jìn)行設(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)在這種效果就是鼠標(biāo)移動過去后，顯示的最終效果；
7、現(xiàn)在要的效果是，鼠標(biāo)經(jīng)過圖片時，慢慢變黑的，所以可以先將不透明度設(shè)置為0，然后鼠標(biāo)經(jīng)過時，慢慢顯現(xiàn)
8、然后添加偽類效果：
div:hover h1{opacity:0.6;}
鼠標(biāo)經(jīng)過div時，h1慢慢顯現(xiàn)，造成圖片慢慢變黑的效果
以上就是dw中制作鼠標(biāo)經(jīng)過圖片變暗效果的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
DreamWeaver中p標(biāo)簽br標(biāo)簽怎么使用?
Dreamweaver圖像怎么通過img標(biāo)簽定義高寬?
dreamweaver怎么制作文本框? dw文本框的兩種制作方法
相關(guān)文章
Dreamweaver怎么避免中文亂碼的問題？Dreamweaver設(shè)計(jì)網(wǎng)站的時候，會遇到中文亂碼的情況，該怎么提前預(yù)防出現(xiàn)這種情況呢？請看下文詳細(xì)的介紹，需要的朋友可以參考下2017-12-31
Dreamweaver cc2018新版頁面怎么切換回舊版本布局?
Dreamweaver cc2018新版頁面怎么切換回舊版本布局？Dreamweaver cc2018中的布局界面和舊版本有很大不同，很多工具都找不到，想要切換到舊版本，該怎么切花呢？請看下文詳細(xì)2017-12-20
Dreamweaver怎么添加本地的瀏覽器為測試瀏覽器？Dreamweaver測試瀏覽器可以自己添加，該怎么將電腦安裝的火狐瀏覽器添加到測試瀏覽器呢？下面我們就來看看詳細(xì)的教程，需要2017-12-19
dreamweaver網(wǎng)頁中怎么制作DIV圖層?
dreamweaver網(wǎng)頁中怎么制作DIV圖層？dreamweaver制作網(wǎng)頁的時候，想要在網(wǎng)頁上制作一個圖層放圖片，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-12-19
Dreamweaver怎么使用標(biāo)簽及代碼設(shè)計(jì)表格?
Dreamweaver怎么使用標(biāo)簽及代碼設(shè)計(jì)表格？Dreamweaver中可以直接繪制表格，也可以通過標(biāo)簽和代碼來制作表格，下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-12-12
Dreamweaver怎么使用框架結(jié)構(gòu)快速制作網(wǎng)頁?
Dreamweaver怎么使用框架結(jié)構(gòu)快速制作網(wǎng)頁？Dreamweaver制作網(wǎng)頁的時候，表格布局已經(jīng)不能實(shí)現(xiàn)網(wǎng)頁的功能了，比如同一頁面下有多個子頁面時，就要使用框架結(jié)構(gòu)來布局，下面2017-12-11
dreamweaver怎么制作鼠標(biāo)經(jīng)過圖片變換的效果?
dreamweaver怎么制作鼠標(biāo)經(jīng)過圖片變換的效果？dreamweaver中想要制鼠標(biāo)經(jīng)過或點(diǎn)擊圖片，圖片會改變，該怎么制作這個效果呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參2017-12-11
dreamweaver怎么快速對齊代碼? dw對齊代碼的設(shè)置方法
dreamweaver怎么快速對齊代碼？dreamweaver中的代碼很多，想要對齊代碼，該怎么對齊呢？下面我們就來看看dw對齊代碼的設(shè)置方法，需要的朋友可以參考下2017-12-11
Dreamweaver怎么設(shè)計(jì)簡單的導(dǎo)航按鈕?
Dreamweaver怎么設(shè)計(jì)簡單的導(dǎo)航按鈕？一般網(wǎng)頁中都有導(dǎo)航欄或者導(dǎo)航按鈕，該怎么制作導(dǎo)航按鈕呢？下面我們就來看看詳細(xì)的制作方法，需要的朋友可以參考下2017-12-11
Dreamweaver怎么給圖片添加晃動效果？網(wǎng)頁中經(jīng)常能看到一些晃動的廣告圖片，該怎么給圖片添加晃動效果呢？下面我們就來看看詳細(xì)的教程， 需要的朋友可以參考下2017-12-04
