Több lineáris színátmenet

Kettőnél több színt is megadhatunk.

Ha a közbenső értékekhez nem nem rendelünk pozíciót, akkor arányosan lesznek elhelyezve. (Pl. A harmadik középre kerül.)

Megadhatjuk az egyes színek gradiens-vonalon elfoglalt helyzetét hosszértékkel, vagy százalékban. Így az egyes részátmenetek tetszőlegesen pozicionálhatók.

Több lineáris színátmenet beállítása:

kijelölő

{

background-image

linear-gradient(irány, szín1 pozíció, szín2 pozíció,...színN pozíció);

}

Példa:

Forráskód

<style> 
  div {width:150px; height:100px; padding:10px;margin:2px; color: #ffff66;} 
  #div1 { 
    /*-webkit-..; -moz-..; -ms-..; -o-.. */
     background-image: linear-gradient(left, #0000ff, #000066, #0000ff, #000066); 
  } 
  #div2 { 
   /*-webkit-..; -moz-..; -ms-..; -o-.. */
     background-image: linear-gradient(left, #0000ff, #000066 20%, #0000ff 40%, #000066); 
  } 
  #div3 { 
   /*-webkit-..; -moz-..; -ms-..; -o-.. */
     background-image: linear-gradient(left, #0000ff, #000066 40%, #0000ff 60%, #000066); 
  } 
  #div4 { 
   /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: linear-gradient(left, #0000ff, #000066 40px, #0000ff 60px, #000066); 
  } 
</style> 
...
<body>   
  <div id="div1"><p>arányos</p></div> 
  <div id="div2"><p>20% 40%</p></div> 
  <div id="div3"><p>40% 60%</p></div> 
  <div id="div4"><p>40px 60px</p></div> 
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: hatter_szinatmenet_linear_tobbszor.html