Princess Party

Princess Party - 網頁教學

主選單

網頁教學

霧化遮蓋圖片顯示

2008/05/22 (Thu)
  • 此特效能讓圖片在同框架在霧化的背景下顯示圖片,作為點圖放大或是照片瀏覽器時會有不錯的效果!
    使用前需先下載 http://rei.idv.tw/sample/parts/popup.js 這個檔案,並將其與 html 放置於同資料夾下。

原始碼

設定方式

  • 【修改霧化區塊的設定方式】
     在 Style 區域裡面第 3 行的 top: 70px; 這一段,代表的意思是圖片在霧化區塊中上方間距。
     後面的 text-align: center; 這一段,代表圖片在霧化區塊中的顯示位置,若要改為置左或置右,可自行指定為 left 或 right。
     第 4 行的 border: 3px solid #fff; 是給圖片在霧化區塊裡加上邊框,若要給圖片加任何 CSS 效果都可以在這裡自行修改。
     第 5 行的 background: #000; 是霧化區塊的顏色,預設為黑霧,若要改成其他顏色可以自行在此修改色碼。

    【注意事項】
     此特效必須要包在一組 <div id="main"></div> 之間。
     <noscript> 區為無法使用 Java Script 時的替代效果。

取材網站

相關回應

請問

2010/10/21 (Thu)
  • 請問google瀏覽器有許多html都不支援嗎?
    很多時候我用google開啟都沒有效果
  • Edit / Delete
     

Rei

No Subject

2010/10/22 (Fri)
  • 那得看用的是什麼語法
    一般來說規範裡的語法都是支援的
    甚至CSS3的部分也只有Google瀏覽器支援的最完整

    會看到不支援的語法,多半都是IE或其他瀏覽器的專屬語法才會不支援
  • Mail
  • Home
  • Edit / Delete
     

 

2010/10/24 (Sun)

發表回應

您可以利用以下表單發表您對本篇的回應

  • 表情:            
紙娃娃設定

次選單

訪客人次

  • Total: 92235
  • Today: 02
  • Yesterday: 15

新作塗鴉

最近迴響

素材版權

  • Princess PartyDesign: Rei
  • 幻想素材サイトFirst MoonSozai: 糸宇 睦月

標籤貼紙

  • Valid XHTML 1.0
  • Valid CSS 2.1
  • WCAG 1.0 Triple-A