CSS 背景圖片

background-img
圖片嵌入當背景，來源為儲存在電腦的相對路徑，或為網路上的網路圖片
ex:
h1{
background-imge:url('http://website.com/img/background.jpg');
}

h1{
background-imge:url('images/background.jpg');
}

background-color
ex:
h1{
background-color:green;}

background-repeat
repeat：原格式重複填滿整個版面
repeat-x：僅Ｘ軸方向重複
repeat-y：僅Ｙ軸方向重複
no-repeat：沒有重複

background-position
背景圖片在版面中的位置
top/bottom/left/center

他也可能是百分比％、長度或是XY相結合
background-position: bottom left;

background
background相關屬性都可以集結成background裡面



留言

張貼留言

這個網誌中的熱門文章

RWD響應設計--要點介紹

圖片
viewport ： 在head裡面設定viewport，讓字體不會隨著裝置而改變大小。 html： width=device-width：寬度隨裝置而改變 initial-scale：初始狀態是一倍 user-scalable=1：0為不能拖拉；1為可以拖拉 maximum-scale=1.5：最大拖拉大小為1.5倍 minimum-scale=1.5：最小拖拉大小為1.5倍 media-query： 在樣式表（ css ）中於不同裝置尺寸中，設定不同的格線寬度。 當物件到達某個裝置大小時，內容物會隨之改變大小或者換行。 Queries 有四種使用方式，分別是  or 、 and 、 not  和  only ，除了 or 使用逗號「,」表現，其他的就直接寫出英文字。 OR 例子如下：螢幕尺寸大於等於 400px 「或」裝置橫放時，字體會變成藍色 50px，反之就是黑色 30px。 h1{ font-size:30px; } @media (min-width:400px), (orientation: portrait){ h1{ font-size:50px; color:red; } } And 使用 AND 必須要所有條件皆滿足，例子如下 h1{ font-size:30px; } @media screen and (min-width:400px) and (max-width:600px){ h1{ font-size:50px; color:blue; } } Only ONLY 可以指定「只有」某種裝置媒體才能套用某些樣式，會寫在 media query 的字首， 目前這種撰寫方式越來越少見，最主要是因為使用舊版裝置媒體的人越來越少，因此直接採用 AND 或 OR 的寫法就能夠符合絕大多數的需求。 NOT NOT 的目的在於排除一些裝置媒體，會寫在 media query 的字首，。 ＊NOT 和 O...
閱讀完整內容

教你寫出神企劃：三星、首爾大學都在用的企劃力培養法--重點摘要

圖片
一、最重要的根本是什麼 談判中最重要的是對方，不是你自己--史都華.戴蒙 「迴路聯想」應用於企劃上 重點是「對方腦中看到企劃聯想的是什麼？」，比起自己說了什麼，對方腦海中畫出什麼畫面更為重要 假使希望對方不要想到一隻大象，連別想一隻大象這句話都不要提起。 例：很感謝各位聆聽準備不足的簡報--恩...人不錯，但好像哪邊就是有稍顯不足 問題思考點： 我在團隊成員腦海中會被聯想成什麼樣的人 我在戀人腦海中會被聯想成什麼樣的人 我在朋友腦海中會被聯想成什麼樣的人 我在對方腦海中會被聯想成什麼樣的人 我的企劃、我的企劃書、我的簡報，會在聽眾腦海中產生什麼樣的聯想？ 企劃--站在對方立場，社想出最好的解決方法 企劃背景：定義為啥要做這件事的企劃背景(problem) 概念/提案內容（說故事）：用吸引人的一句話(concept)對方解決對策(solution) 執行方案：提出細部執行方案(action plan)讓對方能看見畫面 整理成企劃書(proposal)使其理解 透過成功的簡報(presentation)引起對方興趣 二、為何聽不懂我的表達/4MAT 寫作時，別忘了在成為作者之前，你也是一位讀者的事實--傑羅姆.大衛.沙林格 學習四階段 why：為什麼要做這件事 what：要進行哪些事 how ：背後的原理和詳細內容 if：如果做了會有怎樣的影響 三、會賣都是有原因的 比起知道答案，不如衍生更多疑問--詹姆斯.瑟伯 ★販售藥品之前，不如販賣疾病 成功的企劃會在談判過程中談及「為什麼」需要這項產品的理由，因此，相同的內容會根據不同的販賣手法，得到截然不同的結局。 企劃領域沒有固定答案，試著用5個why來反覆對自己提問。透過多次地自問自答，才能找出最根本的原因，並且對症下藥提供最適合的解方案。 四、若還是摸不著頭緒的話/Drawing 畫畫是我日記的一部分，我不畫看不見得事物，而是畫知道的事物。 「解決問題圖示法」 講企劃的內容以圖表整理，利用5why先掌握爲什麼要做那件事的「目的」，並定義「問題」。 ★ 必須對方在問題點上達成共識：若雙方對問題的定義不同，那麼提供解決對策的一方就會不斷反覆詢問「究竟哪個才是真...
閱讀完整內容

sketch基本操作

圖片
Artbord：每個page都要有一個artbord, 代表每個裝置的大小 ＊在左上角 insert--artbord Page：每個page最好只有一個功能或流程 insert：基本上新增任何元件都在 insert 裡面 如：要新增一個矩形，就可以在insert裡面點選矩形(快捷鍵R＊必須在語言為英文的情況下) ＊矩形必須放在artbord裡面 工具列：點選上面的工具列表，可以客製自己的工具列，預設有下面一組工具列，往工具列方向拉即可，可以再另外把自己額外新增的功能往上拉。 格線（control+G）：View - canvas - show layout(layout setting編輯) 網格：View - canvas - show grid(grid setting編輯) 新增參考線：直接在尺標上面點選要的參考線位置，即可拉出一條參考線。刪除同photoshop拉到尺標上級刪除。右鍵案尺標，點選remove all vertical guides即可一次刪除所有參考線。 ＊把command - 縮小到某個程度，grid即會自動隱藏。 左下角的filter可以根據你的命名去搜尋你要的圖層。 **鎖定圖層：command+ shift +L **複製圖層/page:comand+D
閱讀完整內容