李明哲老師多媒體互動寫作教學: 背景圖的妙用

2012年10月11日星期四

背景圖的妙用

不必用Photoshop來做圖

把字寫在圖上

就用插入背景圖技巧來完成

要做背景圖這個動作或技巧，是因為我們可以在背景圖上繼續做寫作或編輯的動作。
¡ 可以在背景圖上加字、加圖、加影音等等。
¡ 可以用互動語法，如javascript，來互動地更換背景圖，而不影響圖上的文字等等。
這對圖文整合式的寫作非常重要，根本就是必要技巧！

1 背景圖使用範例（滑鼠移入↓）

掛著的印象是清楚的

一張是大大的牆，貼著許多回憶。但這回憶並不是屬於我的。

那是屬於女兒的。我的早掛於屏東的某個角落。

說明：
DIV、Table等區塊媒材，如果插入背景圖，那麼呈現效果上和圖像是差不多的。但是，這種表現方式有一種優勢，那就是在DIV中，可以繼續寫作編輯元素。更重要的是，這些編輯元素，就可以被互動使用。

2 背景圖技法操作教學

一、插入背景圖之前，請先確定「正確比例」的圖像之寬度與高度。可使用我們教的 stylepix 軟體來測量。
二、之後，就可以依所得之寬度與高度，來設置區塊元素，例如DIV、Table等。

CSS語法（請放置 <head>xxx</head>之間）：

<style>
/* 背景圖的設定 */
.bacimg20171014 {
background-image: url(https://c1.staticflickr.com/3/2916/33771841862_c226ef38b6_b.jpg);
background-repeat: no-repeat;
background-size: 480px 320px; /* 寬度、高度，如果只設寬度，高度電腦會自動算出來 */
background-position: top left; /* 預設值，對齊DIV的左上角 */
}

/* DIV的樣態設定 */
.divset {
width: 480px;
height: 320px;
text-align: center;
font-weight: 900;
}

</style>

編輯的HTML語法：

<div class="divset bacimg20171014">
這是編輯文字。<br>
</div>

呈現樣態：

這是編輯文本。

背景圖簡易語法說明（詳細教學內容按此）：

background-image: url(xxx) 。【xxx為圖像位置網址。】
backgroun-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; 。【不重覆；沿x軸重覆；沿y 軸重覆。】
background-position: top left; 。【圖像位置，在[top,center,bottom] 中三選一，在[left,center,right] 中三選一。】也可以是 background-position: top 10px left 10px; 。這是指，距離頂部 10px，距離左邊 10px 。
background-size: 480px 320px; 【寬、高度，如果只設寬，高度會自動決定。50% 50%，這是指以背景圖的區塊框（如DIV）為準的比例。cover，這是指圖像自動要填滿區塊框（如DIV）（但圖像可能無法完整呈現）。contain，是指圖像要完整呈現在區塊框內（不一定能完全填滿區塊框）。】

★請問，如果「整個網頁」要設背景圖，要如何做？

請把下列的 class 放置於<body xxx>中，即可。

css語法：

<style>
.whobacimg {
background-image: url(圖片的網址);
}

</style>

--------想固定住一張大圖，可以增加的語法------

background-attachment: fixed;    /* 當想使用一張大圖時，背景圖會固定在位置，不會移動 */
background-size: contain;     /* 背景圖會自動變化大小以完整的顯現來符合頁面 */
background-position: top 10px center;     /* 以上方有10px空白，圖像左右中點對準視窗左右之中點 */
background-repeat: no-repeat;     /* 照片不重復出現 */

-------------------------------------------

html語法：

<body class="whobacimg">
x
x
x
</body>

icon圖示：

影音教學：

【2012年教案 click here!】

＊合併式參數的寫法：

background: lightgray url(圖像網址) no-repeat fixed center / cover;

依次是（不需要的功能參數就不要寫入）：

background-color

background-image

background-repeat

background-attachment

background-position / background-size /* 這兩個要寫在一起才會作用 */

語法範例：

<div style="color: red; border: 1px solid gray; width: 480px; height: 320px; background: url(https://c5.staticflickr.com/6/5552/31292953132_392a535309_b.jpg) no-repeat left 5px top 5px / 420px;">
這是編輯元素。<br>
</div>

呈現：

這是編輯元素。

懶人的超快速手上之影音教學：使用kompozer

影音教學的CSS：

3 使用背景圖功能來強調圖像的特定區域

如果想要對圖像的某個重點區域強調。可以先做一個 DIV （設設定寬、高的大小）或是在表格的格子裡，再使用背景圖的功能。
這時要記得：
一、將背景圖放大到你所想要呈現的圖像區域大小之感受。
二、再使用背景圖的移位功能，移動背景圖的所要呈現的區域，到DIV內，來呈現。

請看範例：

單純的圖像↓

使用背景圖強調圖像部分重點↓

範例的html碼：

<div style="width: 400px; height: 300px;" class="backimg20171126"><br>

CSS碼：

<style>

.backimg20171126 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGVMhHRA2MY7IDYXC3sxaFYDL65GSiWR7-DeZl-ZYlIVdsg4PhsdLkV4MAN_7mXgslEFt115WuJ9BtMKvKmiTUo_G85evCeoL6SnEhCXoubSJolyjnQnF_Iu43xG4xXWXmXIKz4QbWbw/w1099-h824-no/);
background-repeat: no-repeat;
background-size: 870px;
background-position: top -140px left -15px;
}

</style>

想想題練習：

可以利用上面的功能特色，來做出明互動的圖像互動文本意義呈現。

CSS語法：

<style>

.backimg20171126b {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGVMhHRA2MY7IDYXC3sxaFYDL65GSiWR7-DeZl-ZYlIVdsg4PhsdLkV4MAN_7mXgslEFt115WuJ9BtMKvKmiTUo_G85evCeoL6SnEhCXoubSJolyjnQnF_Iu43xG4xXWXmXIKz4QbWbw/w1099-h824-no/);
background-repeat: no-repeat;
background-size: 400px;
background-position: top 0px left 0px;
transition: 1s linear;
}

.backimg20171126b:hover {

background-size: 870px;
background-position: top -140px left -15px;

}

</style>

★好用的 background-size: cover;（自動填滿）／互動使用範例

構思：

先做一個小一點的DIV，設置背景圖，背景圖的大小請設為 cover，即背景圖會自動填滿DIV。
使用hover互動技法，當滑鼠移入時，DIV變大。因為我們使用cover的設置參數，所以當DIV變大後，背景圖就自動跟著放大。

做法：

一、請將CSS置入文本，即copy <style>xxx</style>，置放到<head>xxx</head>之間。
二、做出一個小一點的DIV。
三、把 class " divclas20171015 " 設置入於DIV，即可。

CSS語法：

<style>
/*DIV加上背景圖的設置*/
.divclas20171015 {
width: 240px;
height: 160px;
border: 1px solid orange;
background-image: url(https://c4.staticflickr.com/9/8326/28854716891_111afd83e2_b.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition: 0.6s linear;
}

/*互動的設置*/
.divclas20171015:hover {
width: 540px;
height: 360px;

}

</style>

html編輯語法：

<div class="divclas20171015">
<br>
</div>

互動呈現（滑鼠移入 ↓）：

☆移入滑鼠就換圖

CSS語法：

<style>

/*DIV加上背景圖的設置*/
.divbacimg20171015 {
width: 540px;
height: 360px;
background: url(https://c6.staticflickr.com/9/8069/28157165253_bab9357353_b.jpg) no-repeat left top / cover;
transition: 1s linear;
}

/*互動的設置*/
.divbacimg20171015:hover {
background-image: url(https://c6.staticflickr.com/9/8842/28233257493_8c9bdfd372_b.jpg);
}

</style>

HTML編輯語法：

<div class="divbacimg20171015">
<br>
</div>

呈現：

更多好用的背景圖使用設定及範例　＞＞

李明哲老師多媒體互動寫作教學

2012年10月11日星期四

背景圖的妙用

沒有留言:

張貼留言

2012年10月11日 星期四

背景圖的妙用

沒有留言:

張貼留言

2012年10月11日星期四