# 使用方式  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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://information9527.gitbook.io/html/qian-duan-san-xiong-di/css-ji-ben-shi-yong/chang-yong-css-zhi-ling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.