圖文互搭的寫作基礎技巧：插入背景圖
一、排版寫作；二、分層文本；三、圖文互搭。這三個數位文本面向，是撐起數位文本的媒材布局所常見的手
法，即技巧。
插入背影圖後，可以再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 文字安排的大、中、小
五、把影音貼到照片上面去
沒有留言:
張貼留言