> For the complete documentation index, see [llms.txt](https://information9527.gitbook.io/html/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://information9527.gitbook.io/html/qian-duan-san-xiong-di/css-ji-ben-shi-yong/chang-yong-css-zhi-ling.md).

# 使用方式  Background

## Background

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

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

### 顏色 - color

{% tabs %}
{% tab title="Color" %}

```css
        .box{
            background-color: red;
        }
```

{% endtab %}

{% tab title="效果" %}
![](/files/-MJKbqcE94P0wEnRny4M)
{% endtab %}
{% endtabs %}

### 圖片 - image

{% tabs %}
{% tab title="Image" %}

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

{% endtab %}

{% tab title="效果" %}
![](/files/-MJKedw9hLe6UwWw1ae4)

{% endtab %}
{% endtabs %}

### 重複 - repeat

{% tabs %}
{% tab title="Repeat" %}

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

{% endtab %}

{% tab title="效果" %}
![](/files/-MJKd5U5ujfY-afNuruP)

{% endtab %}
{% endtabs %}

### 原始 - origin

```css
    .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 使用&#x20;

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

### CSS Sprites如何應用？

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

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

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

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

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

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

例如：[CSS Sprites Generator](http://csssprites.com/)

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

## 定位 - position&#x20;

### 範例一

{% tabs %}
{% tab title="HTML" %}

```markup
<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>

```

{% endtab %}

{% tab title="CSS" %}

```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;}


```

{% endtab %}

{% tab title="Deom 圖" %}
![下載圖檔](/files/-MJb6qIdbUI6FsRdd_va)
{% endtab %}
{% endtabs %}

### 範例二

{% tabs %}
{% tab title="CSS" %}

```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;
}

```

{% endtab %}
{% endtabs %}

{% content-ref url="/pages/-MKNWa\_mxqKa-Ufi5D7N" %}
[before、after](/html/qian-duan-san-xiong-di/css-ji-ben-shi-yong/chang-yong-css-zhi-ling/before-after.md)
{% endcontent-ref %}