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

2014年10月1日 星期三

用背景圖拼貼圖像 plus 文字安排的大、中、小






可以同時使用很多張
背景圖拼貼圖像
利用多張圖像的位置關係,來呈現文本,不只是「美感」而已。
事實 上,從空間性的文本結構而言,圖像在文本空間位置的變化,即是意義的變化。
未來的文本敘述者, 必須要能使用圖像拼貼的敘事結構,來講故事。






一、影音教學:

二、教學使用的 CSS:請放置於<body>之後
<style>

.backi093001 {
background-image: url(第一張圖像網址), url(第二張圖像網址);
background-repeat: no-repeat, no-repeat;
background-position: right  bottom, right 210px top 7px;
background-size: 360px, 160px;
}

.backi093002 {
background-position: right bottom, right 170px top 47px;
}

.titlebig {
font-family: Verdana, '微軟正黑體';
font-size: 2.4em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
text-shadow: 1px 1px 1px black;
color: darkorange;
}

.titlemid {
font-family: Verdana, '微軟正黑體';
font-size: 1.6em;
font-weight: bold;
line-height: 1.4em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkred;
}

.word01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
}

</style>
三、注意事項:
  1. 要移動背景圖的位置,請注意(上面紅色字體者) background-position: right bottom, right 210px top 7px; 。right【left/ center/ right,三選一】,是指靠 div 的右邊。 bottom【top/ center/ bottom,三選一】,是指靠 div 的底部。而 right 210px top 7px,是指距離右邊210px,同時距離頂部 7px。
  2. .titlebig 是指大標,.titlemid 是指中標,.word01 是指內文的 class。
四、補充的互動語法:請放置於<body>之後
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('.backi093001').hover(function () {
$(this).addClass('backi093002');
}, function () {
$(this).removeClass('backi093002');
});
});
</script>


沒有留言:

張貼留言