圖配文的敘事性互動。
當滑鼠移到圖時，說明性的文字就跑出來。
這是常見的互動手法之一，這個範例是用純CSS的語法來達成。
可以注意的是：文、圖中間的透明度是可以 再被「作者」考量的特色之一。
不同的透明度，會影響 受眾對圖文之間的「交互性理解」。這樣的注意事項，是數位文本寫作時所特有的。
作者將這種互動寫作的思維面向，稱之為「互動文本寫作技法」。
可以注意的是：文、圖中間的透明度是可以 再被「作者」考量的特色之一。
不同的透明度，會影響 受眾對圖文之間的「交互性理解」。這樣的注意事項，是數位文本寫作時所特有的。
作者將這種互動寫作的思維面向，稱之為「互動文本寫作技法」。
這是秋天
風的影子，也會一絲絲的感受到。
陽光成為一種渴望的想像，配上可能的啤酒。
ＣＳＳ語法， 請置於<body>之後：
<style>
.word0502 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
}
.backimg {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGEJBWAIshXn3c3V83KmTiI_K5ndipgOwEi0_YTZtB5dhF7MPuVQhl-j662FH17FvRFE07wsurvXkewQjcDRDM-JXdZ91Xd1f89_dXv4thhZm_7hXf8jmFQQ6Vtmd961q54rmiVpjDdE/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
.colortr {
color: transparent;
}
.colortr:hover {
color: white;
background: linear-gradient(0deg, rgba(60,60,60,0.75), rgba(60,60,60,0.75)), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGEJBWAIshXn3c3V83KmTiI_K5ndipgOwEi0_YTZtB5dhF7MPuVQhl-j662FH17FvRFE07wsurvXkewQjcDRDM-JXdZ91Xd1f89_dXv4thhZm_7hXf8jmFQQ6Vtmd961q54rmiVpjDdE/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
</style>
.word0502 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: normal;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
}
.backimg {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGEJBWAIshXn3c3V83KmTiI_K5ndipgOwEi0_YTZtB5dhF7MPuVQhl-j662FH17FvRFE07wsurvXkewQjcDRDM-JXdZ91Xd1f89_dXv4thhZm_7hXf8jmFQQ6Vtmd961q54rmiVpjDdE/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
.colortr {
color: transparent;
}
.colortr:hover {
color: white;
background: linear-gradient(0deg, rgba(60,60,60,0.75), rgba(60,60,60,0.75)), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGEJBWAIshXn3c3V83KmTiI_K5ndipgOwEi0_YTZtB5dhF7MPuVQhl-j662FH17FvRFE07wsurvXkewQjcDRDM-JXdZ91Xd1f89_dXv4thhZm_7hXf8jmFQQ6Vtmd961q54rmiVpjDdE/w1079-h720-no/IMG_4869.JPG);
background-size: 520px 347px;
}
</style>
影音教學：
說明：
一、紅色字體處，是透明層的顏色。【我要看色碼表click】
二、綠色字體處，是透明度。1 是完全不透明。
沒有留言:
張貼留言