Векторная маска для изображений?

[bob_24]

Допустим есть картинка, но надо у это фотки, допустим, уголки вырезать, что бы они были прозрачными. Вот так:

Если сохранить в png то размер во мноооого раз увеличивается относительно jpg. Пробовал подключать скрипт corners (или как-то так, на jQuery), но для него надо создать див вокруг картинки и когда фон не однородный на уголках они становятся белыми %-) Пробовал подключать ictinus, но он не работает в IE8.

Скажите как вы решаете данную проблему?

[Nanto]

Порезать на три части!

[andreysolo]

а если попробовать создать 4 дива с абсолютным позиционированием и расставить по углам?

[Great Rash]

Маски реализованы только в Webkit. Больше их нет нигде. Можно реализовать подобное на VML/SVG, но поверьте, гораздо проще будет сделать это, порезав картинку на части, или отказавшись от затеи вообще.

[andreysolo]

Можно сделать так:

HTML:

<div id="wrap">
    <img src="x_75f45bbf.jpg" width="240" height="320">
    <div class="tl"></div>
    <div class="tr"></div>
    <div class="br"></div>
    <div class="bl"></div>
</div>

CSS:

<style type="text/css">
#wrap { position:relative; width: 240px;}
#wrap div {
	background:#FFF;
	position:absolute;
	width:16px;
	height:16px;
	}
.tl { top:0; left:0}
.tr { top:0; right:0}
.br { bottom:0; right:0}
.bl { bottom:0; left:0}

</style>

хотя упустил важный момент в вопросе.. про прозрачность... Здесь проще конечно резать картинку.

[bob_24]

Да...резать на три части картинку это жестко, но все равно спасибо.)

А в чем проблема с vml/svg?

[andreysolo]

vml/svg? Если не ошибаюсь В IE 8 поддержка SVG отсутствует.

[bob_24]

поэтому написано не svg, а vml/svg.

[Nanto]

А если попробовать http://htmlbook.ru/css/clip

Правда я слабо представляю себе реализацию, так... просто мысль пришла

а картинка бэкграундом или через img?

Edited November 28, 2011 by Nanto

[bob_24]

в clip только прямоугольник. картинка вставляется через img.