*YouTube 教學頻道* *影像布落格*
首頁
初學者技能專區
布落格寫作
小世界習作網
《台灣立報》

2015年5月15日 星期五

圖文互搭基礎技巧:插入背景圖



圖文互搭的寫作基礎技巧:插入背景圖

一、排版寫作;二、分層文本;三、圖文互搭。這三個數位文本面向,是撐起數位文本的媒材布局所常見的手 法,即技巧。
插入背影圖後,可以再DIV或Table裡面,在圖的上面,繼續 編輯/寫作。

技巧,不是單純的工具性的技巧,而是對文本結構,對意義呈現模式的一種寫作的安排。
因此,技巧是「方法」,也是讓意義「客觀化」展現自己的一種「中介」手段;這是套用我對黑格爾的解理。



DIV插入一張背影圖(←click) // 復原
可以繼續在 DIV裡面編輯/寫作(←click) // 復原


我們可以在背景圖的上面,
繼續我們的編輯/寫作的動作。
這使得文字可以互搭於圖片,
形成強烈的圖文互文性的意義呈現。
背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag0515 {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px 390px;
}
</style>
***
選項語法:
background-position: left 5px top 3px;

注意:left/center/right; top/center/bottom; 三選一。紅字為距離,可省略。
***




DIV插入二張背景圖(←click) // 第一張 // 第二張 //
復原


多張背景圖的 CSS 語法,請放在<body>之後:
<style>
.backimag051502 {
background-image: url(第一張照片網址), url(第二張照片網址);
background-repeat: no-repeat, no-repeat;
background-size: 250px 188px, 250px 188px;
background-position: left top, right bottom;
}
</style>



教學影音:




插入背景圖的 更多寫作技能:

一、背景圖的妙用
二、DIV + CSS 隨心所欲搞定網路排版寫作(二): 放入背景圖
三、5秒搞定動態圖檔 Gif 檔! 【←Gif檔直接拿來做動態背景圖】
四、用背景圖拼貼圖像 plus 文字安排的大、中、小
五、把影音貼到照片上面去