梅花的CSS筆記｜用語法放圖片的應用/邊角/邊框/圖片濾鏡 @ 梅花問路

原本圖片可能大概是顯示這樣

顯示圖片的語法整體是這樣(ref. img title跟img alt的差別、img圖片標籤語法)<img src="圖片網址" alt="圖片替代文字" title="圖片標題">

alt(替代文字)和title(圖片標題)可以設也可以不設，如果這兩個都沒有要設定

單純用圖片的語法可以寫這樣就好<img src="圖片網址">

alt(替代文字)：圖片失效的時候的替代文字

title(圖片標題)：圖片上面的標題(滑鼠移到圖片上面才會顯示的文字)

接在<img 後面的幾個屬性

src="圖片網址"	貼上圖片的網址
alt="圖片替代文字"	圖片如果失效的時候會顯示的文字
title="圖片標題"	滑鼠移至圖片上面時顯示的文字

變成圓形圖片，在圖片的設定裡面加上這段style="border-radius:50%"

(50%就是變成圓形，如果想要邊角圓的程度增加或是減少，就自己去增減數字玩玩看囉!)

置中加上這段<p style="text-align: center;"> 如果沒有這段就是原始設定，就會是靠左喔!

置中、圖片變成圓形<p style="text-align: center;"><img alt="" src="https://s5.pimg.tw/avatar/icyin/0/0/zoomcrop/100x100.png" style="border-radius:50%" title="" /><br />

就變成這樣

圖片加上陰影box-shadow: 0 0 10px rgba(0,0,0,1.00);

圖片圓形、陰影<img alt="" src="https://s5.pimg.tw/avatar/icyin/0/0/zoomcrop/100x100.png" style="border-radius:50%;box-shadow: 0 0 10px rgba(0,0,0,1.00);" title="" /></p>

看到一篇介紹用CSS給圖片寫入"濾鏡"的語法，用我的語法筆記封面來玩看看好了~(ref.什麼?? CSS也有濾鏡可以用! (CSS3 filter))

原始長這樣

玩看看模糊語法(在圖片的style設定裡面加上-webkit-filter: blur(3px);)

濾鏡的語法有這些可以玩看看：brightness(亮度)、contrast(對比)、saturate (飽和)、grayscale(灰階)、sepia(懷舊)、invert(負片)、hue-rotate(色相旋轉)、blur(模糊)、opacity(透明度)、drop-shadow(陰影)

看圖片特效的效果: 什麼?? CSS也有濾鏡可以用! (CSS3 filter)

大概整理一下這篇有用到的相關語法筆記如下

src="圖片網址"	貼上圖片的網址
alt="圖片替代文字"	圖片如果失效的時候會顯示的文字
title="圖片標題"	滑鼠移至圖片上面時顯示的文字
<a href="圖片的超連結位址">	把圖片做成超連結
style="border-radius:50%"	圖片變成圓形
style="box-shadow: 0 0 10px rgba(0,0,0,1.00)" 另一種陰影: -webkit-filter:drop-shadow(3px 3px 5px #333);	圖片加上陰影(X軸陰影、Y軸陰影、陰影模糊半徑、陰影顏色) 陰影的說明參照用 CSS3 box-shadow 設計圖片陰影效果
style="border:1px black solid;"	圖片周圍加上邊框(邊框粗細/顏色皆可自行設定) 邊框樣式設定參照【梅花的CSS學習】CSS3 border-radius 讓邊框的邊角更多的變化
style="-webkit-filter: blur(3px)"	讓圖片變模糊

筆記一下相關圖片的應用

HTML或CSS做出圖片按紐 https://www.wibibi.com/info.php?tid=137

線上套用圖片特效或是濾鏡 http://tools.css-tricks.ir/image-effects/

梅花繼續測試用

梅花的語法筆記

檢視CSS標籤F12	文章區塊 #content
＊開發人員工具＊	＊改文章標題字體、背景＊
部落格整體 #body	＊改行距、邊界＊ ⛔
＊換背景底圖＊	公告版面 #spotlight
＊換字體＊	＊公告版面應用＊
＊換部落格ICON＊	實用推薦
＊設計LOGO＊	＊讓部落格可以被Google＊
封面橫幅#banner/#header	＊Google Analytics分析＊
＊換封面底圖＊	其他應用
＊部落格標題敘述大小位置＊	＊梅花的語法筆記本＊
側欄區塊 #links	＊文章內的目錄(錨點)＊
＊改側欄標題的背景＊	＊關閉遮蓋版面的廣告＊
＊Facebook粉專外掛＊	＊隱藏上方藍色選單＊
＊音樂外掛＊	＊連結Google相簿＊
＊YouTube外掛＊	＊圖片瘦身不失真＊
＊分享連結階層＊