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

圖文互搭技巧：

文字區塊加入半透明的底色

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

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

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

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

教學影音：

<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>裡面。