數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2012年12月25日 星期二

表格使用基本功(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!



4 則留言:

  1. 老師~
    為什麼我插入表格的背景圖圖片都出不來
    我都照著上面做

    回覆刪除
    回覆
    1. 一種可能是你的圖片並沒有設定為「公開」,
      如果你是連別人的圖片
      那別人可能不是設定為可被連絡使用

      刪除
  2. 老師,請問我想要有enter的換行,為什麼點一下之後還是不能像您視頻中的那樣從div裏面跑出來呢?

    回覆刪除
    回覆
    1. 因為你的div之後沒有

      你自己去加個

      就可以跳出來再編輯了

      刪除