*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

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>



呈現樣態:

這是編輯文本。


背景圖簡易語法說明(詳細教學內容按此):

  1. background-image: url(xxx) 。【xxx為圖像位置網址。】
  2. backgroun-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; 。【不重覆;沿x軸重覆;沿y 軸重覆。】
  3. background-position: top left; 。【圖像位置,在[top,center,bottom] 中三選一, 在[left,center,right] 中三選一。】也可以是 background-position: top 10px left 10px; 。這是指,距離頂部 10px,距離左邊 10px 。
  4. 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!】

語法說明:
1. 插入背景圖的語法:background-image: url( xxx)。xxx是圖片的位置網址。
2. 這樣圖片就會變成「底圖」,可以在上面繼續寫作、編輯或插入影音聲音等等。


3 網頁中插入背景圖

背景圖同樣也可以放置到整個網頁中。同時,也來處理如何才不會重覆圖像的問題。


語法說明:
1. 圖像不重覆的語法。 background-repeat : no-repeat 。
2. 如果只想讓圖像在 x 軸方向重覆,請用 background-repeat : repeat-x 。
3. 如果是想重覆在 y 軸上,請用 background-repeat : repeat-y 。
4. 這些語法同樣可以用於將圖像以背景圖插入表格、div 等等方面上。


語法補充包
插入背景圖語法整理:
1. background-image: url(xxx) 。【xxx為圖像位置網址。】
2. backgroun-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; 。【不重覆;沿x軸重覆;沿y 軸重覆。】
3. background-position: bottom right; 。【圖像位置,在[top,center,bottom] 中三選一, 在[left,center,right] 中三選一。】



*合併式參數的寫法:


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:

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



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

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


請看範例:

單純的圖像↓



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




範例的html碼:

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


CSS碼:

<style>

.backimg20171126 {
background-image: url(https://lh3.googleusercontent.com/2_3xxJZRWKWdfzX-FU5e94MyVXpKrXoWgnmISovlP5EEliPfSndI4byEYTGy8gjHysLG34995nn7pq9LQNKONZgW8MN7YE4MTf1SbN7d0msA50fyCsSzTYr7iNXtdoDoaiaUBh90-XcgDNeXmuuX-hMWjqCgh5y0hdHRsoA5P5y6cshZOiw0r7PAyQBryf_zuNhXsSdi5LoTlM4XppGnHTzsFfsdl9c_EVkL5cQsYLZNw-0jE-pTP5zG-1xjHq77HXlIUZ_NuxV7hv0u6lhFPWoRofwpjCSODQmbhHERdo9wlJ0E2cgRCjBVr5juqf7EPyxkRNYHPac0yQ_jNG2Rv7NRli4v1OPekHlk4HzdLGBn23ZU9V85fo0G1CcmZzKttHrSGzAc9yiN7dCPDtB8v0TUxS9P_Q6jEGyF4ZNPeumiwBmLcC_O9exp_1vD2oTOoiTUlAAVNoxFbbRXHoI_is1kH8qDpAL4zXNDX-ALdLCD6RCEBPE94O_e-MDrNtp6cARHKnq7AY2NBxb5wJia5UWD2BLjTVoWUoTEa4k8iUNKKmkwA9AVJihWRG0mEl3V-zs4IBqUc8f-U293aOy0n0MZTt9d2H0wMcMg-8c-GP4NB9nZCPcF_sDEI7-eZhawrG85htaULGkhqp6aairwAcsmCOe2sWGc1zA4=w1099-h824-no);
background-repeat: no-repeat;
background-size: 870px;
background-position: top -140px left -15px;
}

</style>


想 想題練習:

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





CSS語法:

<style>

.backimg20171126b {
background-image: url(https://lh3.googleusercontent.com/2_3xxJZRWKWdfzX-FU5e94MyVXpKrXoWgnmISovlP5EEliPfSndI4byEYTGy8gjHysLG34995nn7pq9LQNKONZgW8MN7YE4MTf1SbN7d0msA50fyCsSzTYr7iNXtdoDoaiaUBh90-XcgDNeXmuuX-hMWjqCgh5y0hdHRsoA5P5y6cshZOiw0r7PAyQBryf_zuNhXsSdi5LoTlM4XppGnHTzsFfsdl9c_EVkL5cQsYLZNw-0jE-pTP5zG-1xjHq77HXlIUZ_NuxV7hv0u6lhFPWoRofwpjCSODQmbhHERdo9wlJ0E2cgRCjBVr5juqf7EPyxkRNYHPac0yQ_jNG2Rv7NRli4v1OPekHlk4HzdLGBn23ZU9V85fo0G1CcmZzKttHrSGzAc9yiN7dCPDtB8v0TUxS9P_Q6jEGyF4ZNPeumiwBmLcC_O9exp_1vD2oTOoiTUlAAVNoxFbbRXHoI_is1kH8qDpAL4zXNDX-ALdLCD6RCEBPE94O_e-MDrNtp6cARHKnq7AY2NBxb5wJia5UWD2BLjTVoWUoTEa4k8iUNKKmkwA9AVJihWRG0mEl3V-zs4IBqUc8f-U293aOy0n0MZTt9d2H0wMcMg-8c-GP4NB9nZCPcF_sDEI7-eZhawrG85htaULGkhqp6aairwAcsmCOe2sWGc1zA4=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;(自動填滿) /互動使用範例


構思:

  1. 先做一個小一點的DIV,設置背景圖,背景圖的大小請設為 cover,即背景圖會自動填滿DIV。
  2. 使用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>


呈現:








沒有留言:

張貼留言