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