задача:
нужно выводить превьюшки товара.
див для вывода описан так:
#item_icon {
width: 90px;
height: 60px;
border: 1px;
border-style: solid;
border-color: #cc0000;
border-radius: 10px;
}
(не прикапывайтесь, что радиус указан только один, все костыли для других браузеров я тоже учел, просто решил не засорят Тут листинг)
на странице этих дивов будет много.
как видно из ксс - выводимое в этом диве изображение - должно иметь скругленные края и рамку.
а еще это изображение должно быть кликабельно.
как я хотел сделать:
<div id=item_icon background-image=url('<?php echo blabla ?>')>
<a href=«» title=«»><img src=«images/icon.png» alt=«<?php echo blabla ?>» /></a>
</div>
где images/icon.png - это прозрачный пнг размером 60*90, для кликабельности ссылки.
нафига такой изврат? я не знаю как выводить обрезанные жипеги в диве
радиус 10 от css и радиус 10 закругления от фотошопа - несовместимы почемуто. лезет хрень. да и делать вместо жипега - пнг = утроить вес превьюшек
как вообще лучше поступить?
PS
мне тут подсказывают, что идеологически правильно резать жипеги пых пыхом (при помощи всяких там imagemagick), пририсовывать к ним обводку и так и выводить. может оно и верно - но это значительно усложнит мне процесс написания. хотелось бы правильную реализацию моего костыля
<div id=item_icon background-image>
как правильно выводить этот background-image?