表格使用基本功(6)：為照片加上透明文字腰帶

 

  KompoZer!!
表格使用基本功(6)

為照片加上透明文字腰帶

照片總是需要再說明，才 有更豐富的意義。
在照片上加入透明的文字腰帶，文字與照片這兩種「異質性」的媒材，在此，卻若有似無的相互結合在一起。
這正是多媒體文本的重要特色。

在秋天的印象下 從遠遠的視野，秋總是不見天日的看著你。 並不是一種伸手不見的感覺， 但， 總是讓人若有似無的走著走著向著天際線。

CSS語法：

<style>
.backimg0118 {
background-image: url(圖片網址);
background-repeat: no-repeat;
background-size: 570px;
}

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

.littletitle0118 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.8;
text-align: left;
letter-spacing: 0.03em;
padding: 0.5em;
}

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

</style>

補充的CSS:hover

.transcolor:hover {
opacity: 0;
}

8 影音教學內容：

影 音內容說明：

• 插入背景圖語法； background-image: url(xxx);，xxx=圖片位置網址。
• 背景圖不重覆語法； background-repeat: no-repeat; 。
• 調整圖片大小； background-size: 570px;  。
• 背景色透明度，0  （0~10）； opacity: 0; 看不見 。
  
  

---

相關技能：

插入背景圖。 click here!
透明背景色。 click here!