SEO是什麼?能吃嗎?超狂利器到底有多好用在這一篇篇的文章中通通告訴你!!(四)
- 8月 20 週二 201910:00
為甚麼行銷一定需要SEO?因為這些效益他做得到!!(四)
SEO是什麼?能吃嗎?超狂利器到底有多好用在這一篇篇的文章中通通告訴你!!(四)
- 8月 19 週一 201909:00
為甚麼行銷一定需要SEO?因為這些效益他做得到!!(三)
SEO是什麼?能吃嗎?超狂利器到底有多好用在這一篇篇的文章中通通告訴你!!(三)
- 8月 15 週四 201920:00
有了人工智慧去背技術,再也不用辛苦手動修圖嘍!!
今天要來和大家分享如何使用人工智慧去背~千萬別錯過!!
免費的AI去背網站remove.bg可以在五秒鐘內快速去背
為何我們會想寫這篇文章?
雖然使用 Photoshop 去背可以去的很乾淨，但是修到細節的地方都需手動，對許多新手來說非常耗時，恐怕無法應付大量去背的需求 【請參看文章：Photoshop毛髮去背教學】 。就算是使用其他的免費去背工具、 APP，去背的精細程度也不一。好在現在 AI 人工智慧的技術越來越強大，已有不少專案、開源演算法利用 AI 機器學習 辨識圖像，去背網站「Remove.bg」更是直接把這樣的技術應用在去背，甚至還以免費線上去背的工具的形式呈現，造福更多用戶！
免費去背網站「Remove.bg」可以在你上傳圖片五秒鐘後，其人工智慧技術就能辨識出前景與背景，並且幫你去背，並讓你直接下載透明背景的 PNG 檔案，完全可以說是需要大量圖片去背的網拍美編、數位行銷人員的救星。你唯一需要做的就是上傳「待」去背的圖片就可以拉，完全不需要灌任何的軟體、APP。
擁有強大 AI 工具的去背網站remove.bg可以幫你在五秒鐘快速去背
我們先上傳動物、人與物品等幾張圖來試驗看看吧！首先我們上傳貓咪的圖片：
擁有強大AI工具的去背網站remove.bg上傳圖片後五秒內去背
果然人工智慧真的可以很快的辨識背景、去背神速精準！現在拿另一張貓咪的照片來測試，結果發現 AI 也圈選到了預期外的範圍 (如下圖較偏上方的桃色框框內所示)。結果貼心的 Remove.bg 也有編輯功能 (如下圖較偏下方的桃色框框內所示)：
擁有強大AI工具的去背網站remove.bg上傳圖片後五秒內去背
點進編輯功能後，發現有類似 Photoshop 的橡皮擦工具，可以將不想要的部分擦除。
使用橡皮擦工具將 AI 溢選的範圍清除
去除不要的部分後，還可以看看左側的 Background 選單。當中有各種程度的背景模糊 (Blur) 效果，可以模擬「淺景深」的效果。
在 Background 的選單中，有各式各樣的 Blur 工具可以創造淺景深的效果
下方還有各種背景給你套用，若沒找到合適的背景還可以使用自己的背景呢！
可以自行加上各式各樣的背景
也可以直接下載成透明背景的 png 素材。
去背後可以選擇另外加入背景，或是下載成無背景的PNG圖檔
之前也有像是 Background Burner、Clipping Magic、PhotoScissors 等網站有免費線上去背的服務，不過在一些毛髮邊緣等細節，準確度仍差強人意，需要再用手動微調 (也許花的時間不如使用 Photoshop )。使用「remove.bg」對長髮女生圖片做毛絲去背的測試，雖然結果也稱不上完美，但是跟其他軟體或 APP 來比還是有較好的表現，邊緣處理也自然很多。
使用長髮女生的圖做髮絲去背的測試，雖然也稱不上非常精準，但還在可接受的範圍
其他閱讀
你的指令要求雅婷通通聽得懂!!有專屬台灣人的人工智慧在,一切安啦!!
AI人工智慧進駐大賣場!! 有了這項新技術就能讓員工更專注在客服務上了!!
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
全球TOP 5熱門程式語言,除了Java課程你還應該知道….
優質UI課程讓你放眼世界,一展長才圓夢去!!
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
- 8月 13 週二 201910:00
為甚麼行銷一定需要SEO?因為這些效益他做得到!!(二)
SEO是什麼?能吃嗎?超狂利器到底有多好用在這一篇篇的文章中通通告訴你!!(二)
- 8月 12 週一 201911:00
為甚麼行銷一定需要SEO?因為這些效益他做得到!!(一)
SEO是什麼?能吃嗎?超狂利器到底有多好用在這一篇篇的文章中通通告訴你!!(一)
- 4月 03 週三 201916:24
前端工程師CSS入門教學-Box Model盒子模式
對前端工程師來說,CSS盒子模式Box Model可描述一個元素的組成,是個很重要的觀念.以下是盒子模式的式樣-
在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。
相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。分別介紹如下：
1. 邊界 (margin)
2. 邊框 (border)
3. 留白 (padding)
邊界
如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以前端工程師們可以對這四個邊逐一設定：
有三種方式可以設定邊界，分別為長度、百分比、以及 'auto'。我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin by Tedutw (@Tedutw) on CodePen.
在這裡，上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。
這樣寫會不會太麻煩一些? 會！其實前端工程師常將定義邊界尺寸的四行 CSS 碼濃縮成一行！以下會介紹：
Margin 邊界簡化 (一行文) 表示法
所有四個邊的邊界可以同時由一個 margin 屬性設定，只有一行文。它的語法如下：
margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]
我們來看以下的例子 (請按下方例子左上方按鈕來切換 HTML 與 CSS 碼)：
See the Pen Margin-2 by Tedutw (@Tedutw) on CodePen.
在這裡，邊界的表現跟最前面的例子一樣：上邊界為 50px，左邊界和右邊界為 10%，下邊界為 auto。
使用這種簡化的表示方法，重點在於數字的順序：第一個值是上邊界的值，第二個值是右邊界的值，第三個值是下邊界的值，而第四個值是左邊界的值。
這種簡化 CSS 的一行文標示方法，還有其他的方式，介紹如下：
margin：上 右 下 左; (四個值)
如上方例子所示
margin：上 左右 下; (三個值)
margin: [上面邊界值] [右邊與左邊邊界值] [下面邊界值]
See the Pen margin：上 左右 下; (三個值) by Tedutw (@Tedutw) on CodePen.
margin：上下 左右; (二個值)
margin: [上面與下面邊界值] [右邊與左邊邊界值]
See the Pen margin：上下 左右; (二個值) by Tedutw (@Tedutw) on CodePen.
margin：上下左右; (一個值)
margin: [上下左右邊界值]
See the Pen margin：上下左右 (一個值) by Tedutw (@Tedutw) on CodePen.
邊框
Border 是邊框，介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定，CSS 碼如下：
border: 邊界值 實線或是虛線 顏色;
邊框設定範例如下：
border: 1px solid #000000;
See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen.
如以上範例，我們得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開即可，屬性不需要一個一個下，如:border-width、border-style、border-color 等等。
留白
padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding，內容的部分就會黏著邊框。padding 就會吃到背景色。
以下是沒有設定 padding 的例子，可以看見內容的字緊鄰黑色的邊框
See the Pen 沒有設定 padding 的例子 by Tedutw (@Tedutw) on CodePen.
以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。
See the Pen margin：上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen.
Padding 的上下左右調整，語法跟 Margin 一樣，順序很重要。列舉如下：
padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
padding:[上面留白值] [左邊與右邊留白值] [下面留白值]
padding:[上面與下面留白值] [左邊與右邊留白值]
padding:[上面與下面與左邊與右邊留白值]
【其他相關 CSS 教學】
前端工程師專欄:CSS中常見的邊框屬性解釋
前端工程師專欄:CSS字體單位解釋(下)
前端工程師專欄:CSS字體單位解釋(上)
CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!
前端工程師必備的基礎"CSS的語法格式"
學用CSS做邊框一點都不難!前端工程師看過來呦!
前端工程師的第一堂課:CSS和HTML
