BLOG 主頁｜ 服務中心｜ 雅虎香港

      最新網誌

      編輯 關閉
      網誌 我的網誌內容搜尋：
      引用 檢舉

      Blog半透明工具列,每版固定背景圖加飄飄落下閃動圖背景教學(巳修文章圖片)

      網誌分類：BLOG CSS HTML設置.語法教學 |
      網誌日期：2009-06-01 00:00

      Blog半透明工具列,每版固定背景圖加飄飄落下閃動圖背景教學

      在 Blog Q&A 問題專版,時常都有格友問起我如何制作一幅固定背景圖之餘,

      但又有整個版面飄飄落下背景效果呢?

      其實曾在一些教學文中有講及,但沒人留意到,索性在這篇專注講解清楚吧

       每版固定背景圖語法: (選圖size宜選 1280px寬,望落效果會靚D)

      html{background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/067ecc0f3e1b.jpg)  fixed center top;}

       每版透明飄飄落下背景圖語法:


      body.blog_my, body.blog_my_index, body.comment_listing, body.trackback_listing, body.blog_archives_folder, body.blog_archives_date, body.blog_archives_all, body.post_rte, body.post_doodle, body.guestbook, body.comment_list, body.subscribe_list, body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, body.photo_upload_pc, body.photo_upload_gallery
      {background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/88606433ef25.gif) repeat;}

        為了效果理想, 2種背景同時顯視, 這2组語法請一併使用.

       

       改變 Yahoo Blog 工具列變成半透明:

       原本是灰黑色

       

       加入半透明工具列圖及css後,效果變成這樣

      我覺得2行完全透明是最佳效果的,最緊要靚嘛.

      #blog_masshead,
      #blog_masshead .menu.ml a,
      #blog_masshead .menu .rc_w,
      #blog_masshead .menu .rc_e,
      #blog_masshead .menu.mr a
      {background:none;}

      #blog_masshead .bd
      {background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/79a6bbc59895.png) repeat;height:30px;}

      #blog_masshead .rc_ft div,
      #blog_masshead .rc_bc,
      #blog_masshead .rc_ft,
      #blog_masshead .rc_bd,
      #blog_masshead .rc div,
      #blog_masshead .rc
      {background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/79a6bbc59895.png) repeat;}

       工具列背景圖語法解譯:

      #blog_masshead .bd = 背景
      #blog_masshead .rc = 左上角

       

       加入半透明工具列圖但想保留回自已Blog及焦點頻道之css:

       

      #blog_masshead{height:94px;font-size:12px;background:url(http://i524.photobucket.com/albums/cc321/HelloMissYam/79a6bbc59895.png);}

      #blog_masshead .rc, #blog_masshead .rc div, #blog_masshead .rc_bd, #blog_masshead .rc_bc, #blog_masshead .rc_ft, #blog_masshead .rc_ft div, #blog_masshead .bd, #blog_masshead .menu .rc_w, #blog_masshead .menu .rc_e {background:transparent;}

      大家回去可以試試丫

      但係要小心跟之前設置了的 css語法有衝突喎, 最好抽起左才試用這些新嘢.

       

       

       參考素材可以進入尋找:

      背景圖: http://hk.myblog.yahoo.com/RoseBlog-HelloMissYam/article?mid=13557

      飄飄落下背景圖:  http://hk.myblog.yahoo.com/RoseBlog-HelloMissYam/article?mid=5024

      我希望各位開一本專屬的相冊,存起你地取走的素材,用你自己專屬的 url link,

      否則用左我的相冊,攪到我同你都死圖,睇唔到喇!!

       免費圖片上傳空間,我極力推荐 Photobucket

      註冊網址:http://photobucket.com/

       

       

      如有其他 Blog 設置上問題, 請到 Blog Q&A 問題專版公開發問,

      私人提問一律視而不見及不回應,以便讓更多朋友得以學習.

      前往 Blog Q&A 版面發問問題

       

      如閣下欣賞這篇分享,取走文章作引用,

      請連同 Rose Blog Logo也一併帶走轉貼.

      謝謝各位光臨本格,祝各位享受學習過程的樂趣 !

      按下前往 


       

      引用(4)
      網誌標籤：Blog半透明工具列, 每版固定背景圖加飄飄落下閃動圖背景教學
      共108個回應
      下50個 下50個
      新增回應