此處標示紅字的語法，要定位或是更改這些語法在自己樣式裡面的位置，進到自己的CSS路徑是
右上角點自己的頭像
我的部落格後台樣式管理部落格CSS原始碼
搜尋語法的話可以按Ctrl+F搜尋即可~
如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置
最近在研究用CSS語法創造半透明或是透明的效果
之前我有用過 opacity 這個語法去定義透明的模式
成功的把痞客邦上方藍藍的那個頂列改成與我的背景相近的顏色，並且用成有點半透明
(參照文章: 【梅花的CSS學習】隱藏痞客邦上方藍色的選單)
不過就發現 opacity 如果要用在我的整個側欄+文章區的版面(原本我是白底)
結果好像會變成讓全部的圖片、文字都一起透明，但其實我只是想要白底變成有點透明，希望文字還是清楚的
因為我把自己的版面變寬，最底下的那個 body {} 裡面放的背景圖片幾乎看不見
覺得有點可惜呀!!!
我目前的設定是在 #container 裡面加上這一段語法 background-color:hsla(0, 10%, 100%, 0.5);
↑亮白
這次的學習有參考這篇文章
半透明與透明效果設計 - CSS rgba, hsla 色彩單位 (CSS color units)
這位大大有用了很多的實作例子，不過我大概還有2/3看不懂....所以只有先筆記
rgba 及 hsla 為 CSS level 3 (CSS 3) 起，新一代表示色彩的單位 (color units)，最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值；顏色的指定，當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、gradient 的顏色等。
RGBA是_red 值, green 值, blue 值, alpha 值
red, green, blue 值： 可以是 0 ~ 255 的整數值，也可以是 0% ~ 100% 的百分比值。 例如， rgb(128,128,128) = rgb(50%,50%,50%) = #808080。
alpha 值 (alphavalue)： 0.0 ~ 1.0 允許小數一位的數值， 0 →完全透明， 1 →完全不透明， 0.7 → 70% 不透明。
alpha值等於1時，完全不透明，例如 rgba(255,0,0,1) = rgb(255,0,0) = #ff0000
alpha 值 = 0 時，完全透明，不管是什麼顏色，透明都是看不見的；transparent 代表的是透明黑色，即 transparent = hsla(0,0%,0%,0) = rgba(0,0,0,0) 。(transparent值CSS2不可用)
rgba(255, 0, 0, 0.6) 不透明度 60% 紅色
rgba(0%, 0%, 100%, 0.4) 不透明度 40% 藍色
HSLA是_hue 值, saturation 值, lightness 值, alpha 值
hue 值 (色相值)：以整數「角度」值表示，但是不加「°」角度符號。 0 或 360 →紅色， 60 →黃色， 120 →綠色， 240 →藍色
saturation 值 (飽和度值)：0% ~ 100% 的百分比值， 0% →灰色調， 100% →最大飽和度。所以 0% 時，不論 hue 值是多少，都會以灰階單色呈現。
lightness 值 (亮度值)：0% ~ 100% 的百分比值， 0% →最暗 (暗黑)， 100% →最亮 (亮白)， 50% →正常亮度。 50% 以上漸漸增加白色， 50% 以下漸漸增加黑色。
hsla(0, 100%, 50%, 0.3) 不透明度 30% 紅色
hsla(120, 100%, 20%, 0.4) 不透明度 40% 暗綠色
hsla(240, 0%, 50%, 0.6) 不透明度 60% 中亮灰色
Opacity在這裡也有定義
The CSS opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).
The opacity property value must be a number between 0.0 (fully transparent_完全透明) and 1.0 (fully opaque_完全不透明).
不過坦白說我現在還是看不懂!!!
企圖從筆記和實作當中摸索怎麼去定義色彩吧!
在這個網頁先存起來這幾個已知的RGBA色彩
隨意調色看看(實用的調色工具網站)
RGBA
rgba(255,0,0,0.3)
rgba(0,255,0,0.3)
rgba(0,0,255,0.3)
rgba(192,192,192,0.3)
rgba(255,255,0,0.3)
rgba(255,0,255,0.3)
HSLA
hsla(120,100%,50%,0.3)
hsla(120,100%,75%,0.3)
hsla(120,100%,25%,0.3)
hsla(120,60%,70%,0.3)
hsla(290,100%,50%,0.3)
hsla(290,60%,70%,0.3)
Opacity
rgb(255,0,0);opacity:0.6
rgb(0,255,0);opacity:0.6
rgb(0,0,255);opacity:0.6
rgb(192,192,192);opacity:0.
rgb(255,255,0);opacity:0.6
rgb(255,0,255);opacity:0.6
我的課本這篇文章超厲害的用出超多不同組合的效果半透明與透明效果設計 - CSS rgba, hsla 色彩單位 (CSS color units)
這裡可以去嘗試實際的去試著調色 https://www.w3schools.com/css/tryit.asp?filename=trycss3_color_hsl
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
這網站滿厲害的，也可以在這裡面試作HTML、CSS、Javascrip語法跟效果，之後我想要研究Python，這裡也可以！ https://www.w3schools.com/
梅花的語法筆記
| 檢視CSS標籤F12 | 文章區塊 #content |
| ＊開發人員工具＊ | ＊改文章標題字體、背景＊ |
| 部落格整體 #body | ＊改行距、邊界＊ ⛔ |
| ＊換背景底圖＊ | 公告版面 #spotlight |
| ＊換字體＊ | ＊公告版面應用＊ |
| ＊換部落格ICON＊ | 實用推薦 |
| ＊設計LOGO＊ | ＊讓部落格可以被Google＊ |
| 封面橫幅#banner/#header | ＊Google Analytics分析＊ |
| ＊換封面底圖＊ | 其他應用 |
| ＊部落格標題敘述大小位置＊ | ＊ 梅花的語法筆記本＊ |
| 側欄區塊 #links | ＊文章內的目錄(錨點) ＊ |
| ＊改側欄標題的背景＊ | ＊關閉遮蓋版面的廣告＊ |
＊Facebook粉專外掛 ＊ |
＊隱藏上方藍色選單＊ |
＊音樂外掛 ＊ |
＊連結Google相簿＊ |
＊YouTube外掛 ＊ |
＊圖片瘦身不失真＊ |
| ＊分享連結階層＊ | |
留言列表
心靈小語 / 正能量金句 (2)
