大概不會超過10篇文章(喂

關於部落格
上一次修改部落格描述是在2012年9月20多日,今天1月3日就來換吧~2016年新年快樂!!!
  • 13173

    累積人氣

  • 1

    今日人氣

    0

    訂閱人氣

背景語法

先開後記,研究這篇的背景語法

http://togetter.com/li/138094

(本來是看了niconico的忍myu3的其中一個影片,
於是搜尋[矢羽根 忍者]原來是 暗號 的一種之後,
結果看到網頁背景如此的高大上,反而開始在意語法是啥的了冏)

<style type="text/css">
  <!--
  .cssblk,.cssline{background-image: url(//s.togetter.com/static/1.12.26/web/img/images.png);}
  .icons,.icon,.icon_btn,div.navi span{background-image: url(//s.togetter.com/static/1.12.26/web/img/icons.png);}
  body.kouhaku_tg_kassen:before{background-image: url(//s.togetter.com/static/1.12.26/web/img/special/kouhaku_back.jpg);}
  .kouhaku_pic{background: url(//s.togetter.com/static/1.12.26/web/img/special/pc_csssprite.png) no-repeat;}
  -->
  </style>



然後裡面的其中一個呼叫CSS的語法,連進togetter.css
(我曹,這可讀性…雖然節省空間,不過工程師你還是把語法分個段落啊! orz)




body.kouhaku_tg_kassen:before{content:"";position:fixed;left:0;right:0;
z-index:-1;
display:block;width:100%;height:100%;
-webkit-filter:blur(8px);
-moz-filter:blur(8px);
-o-filter:blur(8px);
-ms-filter:blur(8px);
filter:blur(8px);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
background-size:cover}

以上這段,前半段的blur是背景圖的毛玻璃模糊效果,參考這篇
後半段是背景圖位置。這不用說了,多年前就知道、但最近又研究第二次的東西,變成可以活用一個網頁無限張背景且放在各種不同位置,是說那篇還沒打。只是它這段就只是單純的設定一張背景而已。



效果

 
===========

左右直條和旗幟是用合圖的方法,就只有用一張圖,不愧是專業的orz
其中一篇教學在此

教學兼優點在此
不過對我來說合圖的用途不大,畢竟到時候不是要自架而是想申請代管空間啊。

===========
背景圖會按照網頁大小自動縮放的參考這篇
搜了一下有兩段都有提到,暫時腦袋放空狀態,不知道是不是,先貼出來,
.dropdown{display:block}
.dropdown{position:absolute;top:95%;
left:0;z-index:2000;
float:left;display:none;
min-width:160px;padding:4px 0;
margin:1px 0 0;list-style:none;
background-color:#fff;border:1px solid rgba(0,0,0,.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;border
-radius:4px;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);
box-shadow:0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box}
以上的,和這段:
.popupbox{position:absolute;width:200px;
padding:0;margin:0;list-style:none;
background-color:#fff;
border:1px solid rgba(0,0,0,.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);
box-shadow:0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip:padding-box;
-moz-background-clip:padding;
background-clip:padding-box}
說好的先開後記呢 =_= 都打完了靠。 回去上一篇記今天看完6的事。
相簿設定
標籤設定
相簿狀態