Lineáris színátmenet ismétlése

A repeating-linear-gradient() függvény használatával az átmenetek periodikusan ismétlődnek.

Lineáris színátmenet ismétlése ismétlésének beállítása:

kijelölő

{

background-image

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

}

Példa:

Forráskód

<style> 
  #div1 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: repeating-linear-gradient(70deg,#000066, #0000ff 15px); 
  } 
  #div2 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: repeating-linear-gradient(90deg,#000066, #0000ff 30%); 
  } 
  #div3 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: repeating-linear-gradient(0deg,#ffffff, #000000 1px, #ffffff 2px, #ffffff 25px); 
  } 
</style> 
... 
<body>   
  <div id="div1"><p>#000066, #0000ff 15px</p></div> 
  <div id="div2"><p>#000066, #0000ff 30%</p></div> 
  <div id="div3"><p>#ffffff, #000000 1px, #ffffff 2px, #ffffff 25px</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_ismetel.html