Lineáris színátmenet és átlátszóság

Ha a színátmenet definiálásakor a színek megadására az rgba( ) alakot használjuk, akkor a háttér egyes részei áttetszővé tehetők. Az átlátszóság különböző értékei között ekkor folyamatos átmenet jön létre.

Lineáris színátmenetben átlátszóság beállítása:

kijelölő

{

background-image

linear-gradient(top, rgba(...), rgba(...));

}

Példa:

Forráskód

<style> 
body{background-color: #660000;} 
  div {width:150px; height:100px; padding:10px;margin:2px; 
     color: #ffff66; border:1px solid #ffffff; } 
  #div1 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: linear-gradient(left, rgba(0,0,255,1), rgba(0,0,255,0));  
  } 
  #div2 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: linear-gradient(left, rgba(0,0,255,0.9), rgba(0,0,255,0.4)); 
  } 
  #div3 { /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: linear-gradient(top, rgba(0,0,255,0.7), rgba(0,0,255,0.2)); 
  } 
</style> 
... 
<body>   
  <div id="div1"><p>1 -> 0</p></div> 
  <div id="div2"><p>0.9 -> 0.4</p></div> 
  <div id="div3"><p>0.7 -> 0.2</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_atlatszo.html