六角學院｜切圖技巧

background-repeat：將圖片重複顯示，repeat-x
-background:no-repeat/repeat/repeat-x/repeat-y;
補充:http://www.1keydata.com/css-tutorial/tw/background.php


圖片種類介紹 ( gif、jpg、png )
gif:動態效果的圖片並且支持透明背景
jpg:沒動畫不透明;預設白色底.
png:png-8→只有支援256色;支援透明圖層.
       pog-24→較png-8色彩豐富

background設定
example:
background-image: url(../img/logo2.png);
background-repeat: no-repeat;
background-color: red;
background-position: left bottom;
background: url(../img/logo2.png) no-repeat red left bottom;

圖片取代文字技巧(可死背)
text-indent: 101%;
overflow: hidden;
white-space: nowrap;

text-indent 屬性:有三種用法︰(1)讓首行縮排 (2)讓首行凸出來(3) 讓字變不見
http://blog.xuite.net/vexed/tech/29345696-CSS+屬性+text-indent
overflow屬性:
(1)auto:預設會自動使用捲軸
(2)visible:顯示的文字或圖片會直接超出範圍，不使用捲軸
(3)hidden:自動隱藏超出的文字或圖片
(4)scroll:自動產生捲軸
(5)inherit:繼承自父元素的可見性

white-space屬性:
(1)normal:默认。空白会被浏览器忽略。
(2)pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
(3)nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
(4)pre-wrap:保留空白符序列，但是正常地进行换行。
(5)pre-line:合并空白符序列，但是保留换行符。
(6)inherit:规定应该从父元素继承 white-space 属性的值。