我要性感的！ 半透明的誘惑 >> 在背景色

真的，我也很喜歡看性感的！

尤其是半透明的那種，癢癢的讓人說不出的「愉悅」。愉悅，這是「文化研究」專用術語啊，同學！。

• 文化研究是「左派的」，非常「嚴肅」研究流行文化的學問！

我特別喜歡那種「半透明」的，隔上一層的，那種版面的性感。

【段落旋轉語法 ↘】

<div style="font-family: 微軟正黑體; font-size: 210%; font-weight: bold; -webkit-transform:rotate(12deg);">

或者加入互動的class

<style>
.rotate101101 {
-webkit-transform: rotate(0deg);
font-family: 微軟正黑體;
font-size: 210%;
font-weight: bold;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.rotate101101:hover {
-webkit-transform: rotate(6deg);
}
</style>

半透明背景色網頁視覺效果：

　
半透明的背景色！(+)
如果放在圖片上面，背景色就會很性感的
看透過去哦！
但「字」卻仍會清清楚楚，不會變透明的！

語法：

<div style="background-color: rgba(255,181,181,0.2); height: 200px; width: 300px; ">
<br />
<br />
半透明的背景色！<br />
如果放在圖片上面，背景色就會很性感的看透過去哦！<br />
但「字」卻仍會清清楚楚，不會變透明的！
</div>

語法說明：

• 就用上這個：「background-color: rgba(255,181,181,0.2);」。255, 181, 181，是顏色的RGB碼（>），0.2 是指透明程度。0.0是完全透明，1.0就是不透明了。

背景色   v.s.  透明背景色 (mouseover)

<style>

/* 不透明背景色 */
.bg2016101101 {
background-color: lightgray;
}

/* 透明背景色 */
.bg2016101102 {
background-color: rgba(255,181,181,0.4);
}

</style>

實作影音範例，請按此。

背景色的習作：

請做出DIV堆積木法版型。請按此看效果。
再請做出不同透明度的背景色，來觀察文本所產生的意義呈現感受。

文字DIV黑色背景色，background-color: rgba(0, 0, 0, 1);
透明層級的變化：     0,     0.3,     0.5,      0.7,        1   。（←請按看效果）

雨天的溫泉鄉

那是烏來，一個在半山中的小鄉。
冬天，飄雨是應景氛圍。
三三兩兩的，是人；
昏昏暗暗的，是路燈的心情。

做法構思：

1. 先置入一張大圖。
2. 在圖的下方做一文字框DIV。DIV內寫入標題及內文。
3. 在標題的文字部分，又設置一個DIV將其包起來。這形成了文字DIV內有標題DIV的結構。
4. 最後將文字框DIV上移。此即將CSS套入文字DIV內，亦即將class "divword20171108" 設置入文字DIV，即可。

寫作注意事項：

如果上方版面區域的媒材是「圖 片」， 當下方背景圖或背景色，使用 margin-top 的功能上移；當重疊時，那麼背景圖或背景色的功能會失效。

因為，「強勢」的圖片，會蓋住「背 景圖、背景色」。 所以在圖片後面的DIV區塊，如果要使用margin-top去蓋住圖像，則要使用重疊css語法，使 其疊在圖像之上，效果才會出來。例如：

<style>
position: relative;
z-index: 2;
</style>

這樣，圖像下方的DIV區塊的所有效果，就會出來。我要取消z-index功能。


我想看文字DIV設定的 style 語法：

<style>

/*文字DIV的CSS*/
.divword20171108 {
box-sizing: border-box;
width: 520px;    /*你可以重新設置寬度，例如width: 560px; ，或是拿掉以預設值來做。*/
margin: auto;
padding: 1em 0em 1em 2em;
background-color: rgba(0, 0, 0, 1);    /*請重新設置參數使其文字DIV透明背景色出現，例如 background-color: rgba(0, 0, 0, 0.3); 。*/
color: white;
font-family: Verdana, '微軟正黑體';
font-size: 1.11em;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.12em;
margin-top: 0em;    /*請重新設置參數使其文字DIV上移，例如 margin-top: -10em; 。*/
transition: 1s ;
position: relative;           /*以下這二個一定要加才會有文字DIV上升到最上層的效果*/
z-index: 2;
}

/*大標*/
.divword20171108 >div{
font-size: 1.45em;
}

</style>


影音教學：