Привет!

Помогите решить проблемку:
ест ли возможность сегментарно изменять прозрачность растровых изображений?

Т.е., есть у меня на страничке картинка, img, с сорцом в виде, например jpg’а;
Картинка скейлится в зависимости от разрешения экрана;
Очень хочу делать части этой картинки прозрачной.

Подозреваю, что реализуется как-то посредством канваса, но по гуглению у меня 3 с минусом, подскажите кто-нибудь, куда смотреть?

Картинка, иллюстрирующая то, что нужно:

Linux Nix Web Development - http://linuxoids.org/ размер 500x391, 131.98 kb

22 Responses to Привет!

  1. IhsSport:

    PNG нельзя?

  2. Amrin:

    Берешь четыре (или сколько тебе надо) дива, всем задаешь в качестве фона одну и ту же картинку, но с поправкой background-position, так, чтобы каждый див являлся продолжением друг друга и динамически меняешь каждому opacity.

  3. VmtSnow:

    коротко и ясно

  4. Thgenko:

    если с канвасом, то надо примерно так: нарисовать картинку на канвас, очистить ненужные кусочки. тада. правда канвас сильно капризный и в старых браузерах не работает.

  5. TToBlank:

    хуй там был.
    Ещё раз повторю, что фон — скейлящаяся картинка)

  6. TToBlank:

    хрен с ними, со старыми браузерами, есть какой-то работающий пример?

  7. Amrin:

    Kot-BegemoTT: а фон под картинкой статичный?

  8. Amrin:

    и как именно ты скалируешь эту картинку к размеру экрана?

  9. TToBlank:

    img width=100%

  10. Niasuper:

    Kot-BegemoTT: а разве background-position нельзя в процентах указать?

  11. TToBlank:

    можно. Нельзя указать масштаб background–image в процентах.

  12. Amrin:

    Kot-BegemoTT: Есть такой параметр background-size так что можно.

  13. TToBlank:

    гм. Спасибо, как-то этот момент я проебал. Сегодня посмотрю.

  14. Mlrre:

    Kot-BegemoTT: там поддержка у ie9+, врядли подойдет
    а не пробовал сделать плитку из img у которых ширина/высота заданы в процентах, отдельно у них менять opacity?

  15. Thgenko:

    Kot-BegemoTT: https://developer.mozilla.org/en/Canvas_
    ну и там рядом еще пачка

  16. TToBlank:

    тоже вариант, только он сразу предусматривает какой-то бэк-энд обработчик картинки (чтоб её нарезать), а хотелось бы как-то без этого обойтись

  17. Amrin:

    Kot-BegemoTT: Ты все-таки скажешь у тебя фон то статичный или нет?

  18. TToBlank:

    фон под картинкой — другая картинка (так же скейлящаяся);
    нужно просто оформить переход между разделами со свистелками и перделками.

  19. Amrin:

    Kot-BegemoTT: может тебе вот такой эффект подойдет — http://jqueryui.com/demos/hide/?

  20. TToBlank:

    не, это не свистелки и перделки, так, посвистывания и попукивания)
    Генеральная идея была — сделать стаю квадратиков 10х10 пх, бегающих по изображению как при рендере 3д-сцены

  21. Amrin:

    Kot-BegemoTT: Проверяй явой версию браузера и если подходит запускай эффект на основе background–size и background–position, а если браузер старый, то пускай слоем поверх дивы имитирующие такие же квадраты, но с полупрозрачностью в черный. Ну то есть во втором случае вторая картинка просвечивать не будет и все.

  22. TToBlank:

    кэп)
    В плане старых браузеров проблемы особой нет — в них будет простой фэйд картинок.

Добавить комментарий