使用方式 Background

Background

在測試前，需要把div 高度設好或是輸入內容才能看的到Background效果。

    div.box{
       height: 100px;
       width: 100px;
    }

顏色 - color

Color

        .box{
            background-color: red;
        }

效果

圖片 - image

Image

        .box{
            background-image: url("下載.jpg")  ;
        }

效果

重複 - repeat

Repeat

    .box{
         width: 300px;
        background-image: url("下載.jpg")  ;
        background-repeat: no-repeat;
    }

效果

原始 - origin

    .box{
        width: 300px;
        background-image: url("下載.jpg")  ;
        background-repeat: no-repeat;
        background-origin: content-box, padding-box;
    }

差異參考：https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-origin

CSS Sprite 使用

做網頁時候，如果要把網頁做起來活潑靈活，可以使用一張大圖片來活用。當使用者要用多張大量圖檔賭取，可以考慮改用CSS Sprite 這技術，減少讀取網頁圖檔的速度。

CSS Sprites如何應用？

將小圖合併成大圖之後，再使用CSS下列屬性來應用。

　1.background-image 指定背景圖片路徑來源 　2.background- repeat 決定背景圖片如何重複 　3.background-position 設定背景圖片的位置、座標

製作CSS Sprites圖片有什麼方法？

1. 使用photoshop 把很多小圖拼成一張大圖。 　優點：開photoshop檔案修改後，直接轉成一張大圖。 　缺點：開發時需要將每張圖有規律地排列定位、修改時需重新設定圖片座標，維護有點麻煩。

備註：GuideGuide 是一個免費的 Photoshop 外掛程式， 可以快速產生參考線，輔助你定位圖片。 參考文章：http://dclick.fourdesire.com/2013/03/08/css-sprite?ref=extended

2. 透過線上或軟體的小工具。 　優點：只要簡單上傳修改後的圖片，就可以幫你拼成一張圖片，並產生完整的css程式碼給你。 　缺點：每次修改要開photoshop檔案，轉存修改的小圖，再上傳到工具裡，維護上也是比較麻煩。

例如：CSS Sprites Generator

3. 藉由Sass 和 Compass 自動產生CSS Sprites。 　優點： 修改圖檔後，無需上傳圖檔，自動幫你拼成一張大圖，並產生CSS程式碼。 　缺點：需要額外具備Sass 技能。

定位 - position

範例一

HTML

<div style="text-align: center;">水平</div>
<ul class="list">
    <li class="de">德國</li>
    <li class="fr">法國</li>
    <li class="jp">日本</li>
    <li class="kr">韓國</li>
    <li class="tw">台灣</li>
    <li class="us">美國</li>
    <li class="cn">中國</li>
    <li class="uk">英國</li>
</ul>
<br/>
<div style="text-align: center;">垂直</div>
<ul class="list_1">
    <li class="de_1">德國</li>
    <li class="fr_1">法國</li>
    <li class="jp_1">日本</li>
    <li class="kr_1">韓國</li>
    <li class="tw_1">台灣</li>
    <li class="us_1">美國</li>
    <li class="cn_1">中國</li>
    <li class="uk_1">英國</li>
</ul>

CSS

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

.list ,.list_1{
    list-style-type: none;
    background-color: pink;
}

.list{
    display: flex;
}

.list li,.list_1 li{
    width: 60px;
    height: 40px;
    background-image: url('../images/flag.png');
    margin: 10px;
    font-size: 0;
}

.de{background-position-y: 0 0;}
.fr{background-position-y: 40px;}
.jp{background-position-y: 80px;}
.kr{background-position-y: 120px;}
.tw{background-position-y: 160px;}
.us{background-position-y: 200px;}
.cn{background-position-y: 240px;}
.uk{background-position-y: 280px;}

.de_1{background-position:0 0;}
.fr_1{background-position:0 -40px;}
.jp_1{background-position:0 -80px;}
.kr_1{background-position:0 -120px;}
.tw_1{background-position:0 -160px;}
.us_1{background-position:0 -200px;}
.cn_1{background-position:0 -240px;}
.uk_1{background-position:0 -280px;}

Deom 圖

下載圖檔

範例二

CSS

@charset "utf-8";

*{
	padding: 0;
	margin: 0;
}

body{
	background-color: #e6e6e6;
	font-family: Arial, "微軟正黑體";
	font-size: 15px;
}

a
{
	text-align: center;
	display: block;
	width: 530px;
	/*1.height :35px; */
	/*2. height: 50px; */
	/*2. box-sizing: border-box; */
	/*1. 2. padding-top: 1em; */
	color:black;
	text-decoration: none;
	margin-right:auto ;
	margin-left: auto;
	margin-top: 1em;
	line-height: 50px;
	background-image: url('../images/bg.png');
}

a:link{
	background-position: 0 0;
}
a:visited{ 
	background-position: 0 -50px;
}
a:hover{
	background-position: 0 -100px;
}
a:active{
	background-position: 0 -150px;
}

before、after