圖文互搭的寫作基礎技巧:插入背景圖
一、排版寫作;二、分層文本;三、圖文互搭。這三個數位文本面向,是撐起數位文本的媒材布局所常見的手
法,即技巧。
插入背影圖後,可以再DIV或Table裡面,在圖的上面,繼續 編輯/寫作。
插入背影圖後,可以再DIV或Table裡面,在圖的上面,繼續 編輯/寫作。
技巧,不是單純的工具性的技巧,而是對文本結構,對意義呈現模式的一種寫作的安排。
因此,技巧是「方法」,也是讓意義「客觀化」展現自己的一種「中介」手段;這是套用我對黑格爾的解理。
因此,技巧是「方法」,也是讓意義「客觀化」展現自己的一種「中介」手段;這是套用我對黑格爾的解理。
DIV插入一張背影圖(←click)
// 復原
可以繼續在 DIV裡面編輯/寫作(←click) // 復原
可以繼續在 DIV裡面編輯/寫作(←click) // 復原
我們可以在背景圖的上面,
繼續我們的編輯/寫作的動作。
這使得文字可以互搭於圖片,
形成強烈的圖文互文性的意義呈現。
繼續我們的編輯/寫作的動作。
這使得文字可以互搭於圖片,
形成強烈的圖文互文性的意義呈現。
<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; 三選一。紅字為距離,可省略。
***
.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)
// 第一張 //
第二張 //
復原
復原
<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>
.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 文字安排的大、中、小
五、把影音貼到照片上面去