DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖

有創意的圖文關係

插入背景圖後，
我們就可以在圖上再進行編輯動作，
形成各式各樣的圖文搭配關係。

【CSS參考網站(1)】。【CSS參考網站(2)】

1. 在Div內插入背景圖

☆ 為什麼特別在Div內插入「背景圖」，而不直接在網頁上插入圖片就好了呢？
＃這是因為在「背景圖」上，可以寫作、編輯或放上其他媒材。【詳細影音教學↗】

語法【㊉↓】：
<div style="text-align: center; width: 540px; height: 360px; border: 1px solid darkred; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglnj6FhFGQAMnQJsUtlyQU-0ef2UjKUyx7AeZ3U91gOS8kP80HtDMOykPN74vOKYtlazyDMzq_fnJNZFakrEx4v6jlpXv1ko43l48lNSGqV7GP-A633jBfSw5vI722wkAvOWX1tqMJoM0/w540-h360-no/photo.jpg);  "><br><br><br><br><br><br><br> <br><br><br><br>DIV 中插入背景圖。<br></div>

範例呈現：

DIV中插入背景圖。

說明：
1. background-image: url(xxx);，是插入背景圖的語法。xxx 是圖像的位置網址，例如上例圖的位置網址是  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglnj6FhFGQAMnQJsUtlyQU-0ef2UjKUyx7AeZ3U91gOS8kP80HtDMOykPN74vOKYtlazyDMzq_fnJNZFakrEx4v6jlpXv1ko43l48lNSGqV7GP-A633jBfSw5vI722wkAvOWX1tqMJoM0/ -h360-no/photo.jpg。  背景圖例二、背 景圖例三。

---

2. 插 入背景圖的Div，仍是一個可以在裡面進行數位寫作的空白區域。可以寫 入文字、編輯文字【影音教學↗】、 插 入圖片以及置 入video【影音教學↗】等等。【click ↑】換言之，可對這一Div進行任何 寫作的動作。

DIV中插入背景圖。

我們可以在Div裡面進行文字寫作、編輯的動作。

DIV中插入背景圖。

2. 背景圖的大小及重覆

在 最新的瀏覽器中支援了背景圖可以調整大、小的語法（css3）。同時，一旦背景圖小於指定區域（Div）內的大小，預設值是會不斷重覆，我們可以來決定不要重覆。

語法【㊉↓】：
<div id="a2013080601" style="border: 1px solid darkorange; text-align: center; width: 540px; height: 360px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJbHM4AgTRBhByk2M6z-CG4vXKUUDTiFWfbZdxSe0_lNj45Pph1uaHd6pXSQY2aKnC8ShDvWwvMQ4Qcf_2w0IEbPo4V-xHfBM-TdFyZcvYcEeNpNMJZGRYMtSjqwublGsxT4bDZx5BMc/w1160-h774-no/IMG_7212.JPG); background-size: 540px 360px; color: red;"><br><br><br><br>調整背景圖的大小。<br>決定背景圖是否要重覆。<br></div>

範例呈現：

調整背景圖的大小。
決定背景圖是否要重覆。

說明：
1. background-size: xxxpx yyypx; ，xxxpx是指圖的寬為多少px，yyypx是指圖的高為多小px。例如上例為 background-size: 540px 360px; 。也可以只單獨調整寬度，高度則會被自動調整，例如 background-size: 540px; 。這一語法是css3的最新語法，舊一點的瀏覽器不支援，同時我們常用的網頁編輯器Kompozer也不支援。這種狀況下，我們就要事先把圖的小大做好。【詳細語法說明↗】

---

2. 一旦圖小於預定的編輯區域，預設值是圖會不斷重覆來填滿編輯區域。這時就可以用 background-repeat: no-repeat; 來設定為不重覆。當然，如果想重覆可以設為 background-repeat: repeat; 。同時也可以設定為沿著x軸重覆，及沿著y軸來重覆。語法為 background-repeat: repeat-x; 以及 background-repeat: repeat-y; 。

3. 插入背景圖快速上手操作

這個DIV裡有插入背景圖，
所以可以在上面再做編輯動作。

影音教學：

<style>
.backimage101701 {
background-image: url(網片網址);
background-repeat: no-repeat;
background-size: 480px;
}
</style>

第一次使用： 網頁寫作／編輯軟體Kompozer：第一次使用就上手。 小世界網路組：kompozer寫作的四個基本動作。

搞定文字： →教學網頁。 字體、大小、粗細、顏色、複製、貼上、靠左…等各種文字處理技能。

處理圖像： 教學網站。 貼上、剪下、縮放、連結、文繞圖、框線、背景色…等等。

表格排版：

影音 & 動畫flash：

基本互動：

插入背色／景圖：常用 CSS3 語法 background-color: gray; 背景色。 background-color: rgba(255, 255, 255, 0.7); 半透明背景色。 background-image: url(圖像網址); 插入背景圖。//none; 不要顯示。//url(第一張網址), url(第二張網址); 重疊多張背景圖〔第二張在下，亦可多張〕。〔背景可和背景圖一起使用，背景色將在下〕。 background-repeat: no-repeat; 沒有重覆。//repeat-x; 沿x軸重覆。//repeat-y; 沿著y軸重覆。〔若設置二張背景圖，則//no-repeat, repeat-x;〕。 background-position: left top; 〔left/ center/ right ｜ top/ center/ bottom; 三選一〕顯示位置。多張圖〔第一張顯示位置, 第二張顯示位置;〕。//60px 30px; 預計值為left top。//25% 50%; 預設值為left top。//right 60px bottom 30px; 距右邊60px 底部30px。 background-attachment: fixed; 固定背景影像。 background-clip: border-box; 〔border-box/ padding-box/ content-box; 三選一〕顯示區域。 background-origin: padding-box|border-box|content-box；起始區域。 *特*  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 有紋理的字（chrome）。 background-size: 640px 480px; 背影圖寬度高度。//percentage //cover //contain

範例一：

<style>
.backgrou01 {
background-image: url(https://farm5.staticflickr.com/4457/37830478406_64ba156579_o.jpg);
background-repeat: no-repeat;
background-size: 70%;
background-position: right 5% top 10%;
}
</style>


範例一呈現：

範例二：二張以上之背景圖並存的 語法：

<style>
.backimg1215 {
background-image:
url(https://farm5.staticflickr.com/4834/31286389517_94f3fae804_o.jpg),
url(https://farm5.staticflickr.com/4910/31286391717_d868bc03d2_o.jpg);
background-repeat: no-repeat, no-repeat;
background-size: 55% auto, 65% auto;
background-position: left 5px top 5px, right 10px bottom 10px;
}
</style>

<div style="width: 580px; height:436px; border: 1px solid lightgreen;" class="backimg1215"><br>
</div>


呈現：

說明：

在參數後的後面依序加入參數值，中間用「,」分隔起來。在愈前面的參數值，會是被堆放在「最上面」。

背景圖技巧應用

插入背景圖運用：紋理字

這是有紋理的字

<style>

/* 大標紋理字設定 */
.divbigtex20170710 {
font-family: Verdana, '微軟正黑體';
font-size: 5.13em;
text-align: center;
font-weight: bold;
line-height: 2em;
background-image: url(圖像網址);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

</style>



表格與背景圖運作練習：（mouseover ↓）


構思說明：

一、表格的高度要和設成背景圖高度一樣。
二、上面的那一格的高度要設成，60  %的表格（此例）。
三、再對文字進行位置的設定。


寫作材料：照片





DIV與背景圖運用練習：