Částečná průhlednost obrázku.

21. 8. 2012 11:29:23

Rád bych vytvořil přechod zprůhlednění u obrázku pomocí css(viz photo). Vím že v dnešní době se dělají nejrůznější triky v css bez použití photoshopu a myslím že jsem to kdysi někde viděl. Rád bych se tedy zeptal zda by mi někdo neporadil jak to napsat.

Vysvětlení: Potřebuji z pravé strany zprůhlenit cca 30% obrázku (viz foto). Pod obrázkem bude pozadí se vzorem takže tam nechci dávat přechod do určité barvy pomocí photoshopu a rád bych to vyřešil čistě v css.

Děkuji za odpovědi a nápady na zpracování.

6162

21. 8. 2012 11:29:23

https://webtrh.cz/diskuse/castecna-pruhlednost-obrazku/#reply798786

benzen

(1 hodnocení)

21. 8. 2012 11:38:14

Zkuste:

-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));

a nebo

/* Webkit */

background: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(1, rgba(0,0,0,0.0)), /* Top */

color-stop(0, rgba(0,0,0,1.0)) /* Bottom */

);

/* Gecko */

background: -moz-linear-gradient(

center bottom,

rgba(0,0,0,1.0) 0%, /* Bottom */

rgba(0,0,0,0.0) 100% /* Top */

);

21. 8. 2012 11:38:14

https://webtrh.cz/diskuse/castecna-pruhlednost-obrazku/#reply798785

VOSICKA

(13 hodnocení)

21. 8. 2012 11:49:43

U prvku mi to funguje ale obrázek mi to nezprůhlední.

21. 8. 2012 11:49:43

https://webtrh.cz/diskuse/castecna-pruhlednost-obrazku/#reply798784

benzen

(1 hodnocení)

21. 8. 2012 12:00:18

Možná obalit obrázek div tagem a tomu dát ten gradient, ale nezkoušel jsem. Je to jen nápad.

21. 8. 2012 12:00:18

https://webtrh.cz/diskuse/castecna-pruhlednost-obrazku/#reply798783

800XE

(8 hodnocení)

21. 8. 2012 12:05:08

Na to co chceš bys podle mě musel použít canvas nebo JavaScriptem rozsekat těch 30% do 1px širokých divů s posunem background-position a opacity(nedoporučuju). Jinak pro barvu v podstatě stejně jako v první odpovědi, jen by to vypadalo spíš takhle:

21. 8. 2012 12:05:08

https://webtrh.cz/diskuse/castecna-pruhlednost-obrazku/#reply798782

Pro odpověď se přihlašte.

Přihlásit