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>


沒有留言:

張貼留言