*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
融媒體Wix教學
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
Unsplash圖像集
我的給大學生書單

2015年10月17日 星期六

文字區塊加入半透明的底色:圖文互搭技巧


圖文互搭技巧
文字區塊加入半透明的底色













這是文字,但背景色是透明的。

一種流動的質感,是立基於形式之中。
綠色的花舞,抹起了一絲明亮的思緒!



圖文互搭寫作是網路文本的重要特色之一。半透明的背景色,可以為文字和圖像之間,牽動了一種更為互 依的交互感受。

在這裡,我們所思考的互動模態是:滑鼠移到圖中的文字區塊,文字區塊就變底色。這一互動計設之重點,加強文字區塊背景色,讓文字區塊「斷離」於圖像的連結,讓讀者專心於文字區塊,喚醒讀者對文字的注意力。


教學影音:



<style>

.bacimg1017 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 578px;
}

.word2015101701 {
font-family: Verdana, '微軟正黑體';
font-size: 1.26em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 1em;
color: white;
}

.transcolor {
background: rgba(255, 255, 240, 0.4);
}

</style>


補充互動style

.transcolor:hover {
background: rgba(255, 255, 240, 0.9);
color: gray;
}



顏色代碼網站:click here!!


我想看更多基本說明:click here!!



2019/04/新補充內容

另一種思考模式是:
如果我們把滑鼠一移到圖片,圖片中的字就馬上會變化,
這樣的互動模態,要如何來使用css語法呢?


請看範例:













這是文字,但背景色是透明的。

一種流動的質感,是立基於形式之中。
綠色的花舞,抹起了一絲明亮的思緒!



這一效果,我們是使用了如下的互動CSS語法:

.bacimg1017:hover >div {
background: rgba(255, 255, 240, 0.9);
color: gray;
}

請直接加入<style>xxx</style>裡面。





沒有留言:

張貼留言