http://learn.shayhowe.com/html-css/backgrounds-gradients

LESSON 5 Backgrounds & Gradients 背景跟漸層

背景在CSS設計是很重要的一個部,可以簡單修改一個元素的組成。

有多種方法,純顏色、圖片、複合。

CSS3裡面有更多的與法可以設定,甚至還有多重背景在單一個元素上,目前開始有越來越多瀏覽器支援。


作者推薦投影片 127頁:
http://www.slideshare.net/maxdesign/css3-backgrounds

  1. Background Color 兩種方法
  1. background #f60 (同時支援色碼跟圖片)
  2. background-color
    http://www.w3schools.com/cssref/css_colors_legal.asp
  1. Hexadecimals : #f60
  2. RGB : rgb(0,0,255)
  3. RGBa : rgba(0, 0, 0, 0.3) IE9+
  4. HSL: hsl(120,65%,75%)  IE9+
  5. HLSa : hsla(120,65%,75%,0.3); IE9+
  1. Background Image
  1. background: url
  2. background-image url
  1. repeat
  1. position
    兩個值設定 horizontal offset & vertical offset
    background: url('alert.png') 10px 10px no-repeat;
    background-image: url('alert.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    可以使用 top, right, bottom, left keywords 或是 pixel, percentages....等
    keywords 可以跟百分比對照
    percentages 勝過keywords 的是如果你設定 50% 可以置中
    pixel 還是最常拿來當作精準的定位

  1. Gradient Backgrounds CSS3
  1. Browser Specific Porperty Values
    While vendor prefixes are becoming less relevant it still doesn’t hurt to use them for older browsers.
  1. Mozilla Firefox: -moz-
  2. Microsoft Internet Explorer: -ms-
  3. Opera: -o-
  4. Webkit (Chrome & Safari): -webkit-
  1. Linear Gradient Background
    http://dev.opera.com/articles/view/css3-linear-gradients/
    http://dev.w3.org/csswg/css3-images/#linear-gradients
    div {
    background: #70bf32;
    background: url('linear-gradient.png') 0 0 repeat-x;
    background
    : -webkit-linear-gradient(#a1e048, #6a942f);
    background:    -moz-linear-gradient(#a1e048, #6a942f);
    background:     -ms-linear-gradient(#a1e048, #6a942f);
    background:      -o-linear-gradient(#a1e048, #6a942f);
    background:         linear-gradient(#a1e048, #6a942f);
    }
  1. linear-gradient(#8ec63f, #45611f) 從第一個顏色漸層掉二個
  2. 可以使用keyword進階的控制方向
    http://meyerweb.com/eric/thoughts/2012/04/26/lineargradient-keywords/
    background: linear-gradient(to bottom right, #a1e048, #6a942f);
  3. 還可以加上角度 315deg
    linear-gradient(45deg, green 50%, lightblue 50%)
  4. 注意 keyword 的使用方式,之前沒有”to”:舊的 top left  新的 to bottom right
  1. Radial Gradient Background
    http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html
    有分圓形跟橢圓的漸層方式
  2. Gradient Background Stops
    如果以你想製造漸層的顏色不只兩種,可以使用color stops
    你可以接上數種顏色,你可以加上 length value 來決定漸層的距離,如果你沒有加任何長度,瀏覽器會幫你平均分配漸層的長度
    http://gradients.glrzad.com/ <- 產生器可以看長度設定,使用百分比
    background: linear-gradient(to right, #8dc63f, #d8ad45, #3b4b94);
  1. Multiple Backgrounds
    串接多個圖片,只用到 background 這個 property
    div {
     background:
     
    url('foreground.png') no-repeat 0 0,
      url
    ('middle-ground.png') no-repeat 0 0,
     
     url('background.png') no-repeat 0 0;
    }

  1. New CSS3 Background Properties
  1. Background Size Property  (IE9+)
    http://www.w3schools.com/cssref/css3_pr_background-size.asp

    第一個值是設定圖片的寬度,第二個是設定高度
    如果你設定background-size: 85% auto
    代表會等比例縮放
    div {
     background: url('shay.jpg') 0 0 no-repeat;
     background-size: 85% auto;
     border: 1px dashed #8c9198;
     height: 240px;
     width: 200px;
    }
    cover & contain
  2. Background Clip & Background Origin
    用Box Model 的思考模式去設定背景
    最大差別在於 border 是否可以覆蓋底色跟底圖
  1. background-clip
    有”覆蓋”的的意思 底圖的起始定位點在 padding-box
    參數的定義在於你覆蓋到哪一個區塊
    http://www.w3schools.com/cssref/css3_pr_background-clip.asp
  2. background-origin
    底色跟底圖都會跟著設定參數跑
    過去設定 border-box 有底色且是虛線底色或底圖都還是看得見,是可以透過去的。
    http://www.w3schools.com/cssref/css3_pr_background-origin.asp
  3. 參數
  1. Shorthand Property 修改
    舊版:

    新版

  1. 預設: