Změna animace CSS s poloměrem ohraničení csPoint | Výukové programy pro webový design

Mám pozadí, které má horní a dolní přechod a chci, aby se zobrazovalo na vrstvě kontejneru. Problémem je spodní gradient, protože se musí objevit na samém konci div div. Nějaké nápady? Zde je několik příkladů kódu a obrázku:

<style> .container{background: #fff url(images/bg.png) repeat-x;} </style> 

Dynamic stuff goes in here that differs on every page

http://imgur.com/XAaIx

Výše uvedený kód ukazuje pouze přechod v horní části, ale existuje jiný způsob, jak dosáhnout tohoto efektu?

Můžete zkusit něco jako:

<style> .container{background: #fff url(images/bg_bottom_gradient.png) repeat-x;} .subcontainer{margin: 0 auto;background-image:url(images/bg_top_gradient.png);background-repeat: repeat-x;} </style> 

Dynamic stuff goes in here that differs on every page

ÚPRAVA PŘIDAT NOVÝ STYL:

  • To by fungovalo, kdyby vrstvy měly stejnou šířku, ale kontejner (div obsahující bg) se táhne o 100%, zatímco obsahový div má pevnou šířku (950px).
  • @fewpeople - přidaná alternativa.

můžete použít pravidla css pro více pozadí

div.container { background-image: url(images/bg_top.png), url(images/bg_bottom.png); background-repeat: repeat-x; background-position: top left, bottom left; } 

To by mělo fungovat.

  • Zajímalo by mě, které prohlížeče to skutečně podporují.
  • To bohužel nefunguje příliš dobře na IE :(

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?