Наложение прозрачного PNG или GIF на картинку, в зависимости от её ширины

koIIImarik · 04.09.2008, 05:02

Здравствуйте.

Суть задачи такая:

1) Есть бесконечно большое число картинок, у которых будет одинаковая высота, но разные длины.
2) Есть две прозрачные картинки, которые нужно накладывать сверху, на каждую картинку из первого множества.

Принцип накладывания PNG будет таков:

координата _x PNG = ширина картинки - 100px;

Проблема: Изначально не известно, какая длина будет у картинки, на которую сверху будут накладываться PNG, поэтому задать смещение строго в пикселях не получится.

Прилагаю картинки как должно быть, и из чего должно собраться (просьба не обращать внимания на то, что на конечном вариантеприсутствует ещё и фоновая картинка):

За ранее спасибо.

P.S.: Если такая задача силами только вёрстки не реализуема, то есть ещё идеи, как можно это сделать на стороне сервера. Если скрипту передавать картинку, а он, чтобы считывал её размеры и в нужное место вставлял поверх неё картинки пластырей.

Буду рад любому, кто покажет, в какую сторону нужно копать, я уже молчу о примерах. Если у кого-то есть решения подобных задач, то буду вам примного благодарен.

etc · 04.09.2008, 13:02

А давно у картинок длина появилась?

Что-то мне подсказывает, что вам надо работать в процентных отношениях + поля.

Mnilionic · 04.09.2008, 15:54

Код:

<span class="left"></span><img /><span class="right"></span>

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

koIIImarik · 04.09.2008, 16:47

2 __etc:
Я думаю понятно, что речь идёт о ширине картинки, почему-то я думал, что длина и ширина в данном случае понятия равнозначные. на счёт вашего ответа не понял. Какие поля, и соотношение процентное чего брать?

2 Mnilionic:
Спасибо за совет, буду пробовать, надеюсь смогу осилить.

KidsKilla · 04.09.2008, 18:45

1й пластырь.

Код:

position:absolute;top:0;left:0;

2й пластырь.

Код:

position:absolute;top:0;right:0;

родитель ( .plasters)

Код:

position:relative;

Код:

<div class="plasters">
<div class="plaster_1"></div>
<div class="plaster_2"></div>
</div>

koIIImarik · 04.09.2008, 23:56

Я сейчас буду пробовать ваш код, но проблема в том, что родительский ~~клип~~ <div>, вне зависимости от того, какой длины картинка внутри него, растягивается на всю ширину экрана. Я, как мне кажется, догадался, что можно просто левее и правее него вставлять пустые <div>, которые бы занимали пустое пространство и ограничивали его, но пока не очень сообразил, как это должно работать, вернее, как реализовать это.

koIIImarik · 05.09.2008, 01:18

2 KidsKilla:
Описанный вами способ работает в FF 3, Opera и Safari, но не хочет работать в IE 7 (я подозреваю, что в 6-м дела не на много лучше обстоят). Не знаете случайно способа обойти этот баг в IE ?

Но в любом случае спасибо вам большое за подсказанный способ =)

Mnilionic · 05.09.2008, 02:12

лиса, опера , сафари, ИЕ6

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
.img_box{/*border:1px solid black;*/
    margin:0 20px; padding:10px;
    float: left;
}
.img_box img{ position: relative; z-index: 10; }

.corners{/*border:1px solid red;*/
    position: relative; z-index: 20;
    display: block; padding-left: 40px;
    margin: -5px -5px -20px -5px;
    background: url(http://www.flasher.ru/forum/images/russian/style3/statusicon/user_online.gif) no-repeat 0 0;
}
.corners span{/*border:1px solid red;*/
    display: block; padding-top:25px;
    background: url(http://www.flasher.ru/forum/images/russian/style3/statusicon/user_online.gif) no-repeat right 0;
}
</style>
</head>
<body>


<div class="img_box">
<span class="corners"><span></span></span>
<img src="http://www.flasher.ru/forum/image.php?u=26879" alt="1" />
</div>

<div class="img_box">
<span class="corners"><span></span></span>
<img src="http://www.flasher.ru/forum/image.php?u=16552" alt="2" width="150px" />
</div>


</body>
</html>

koIIImarik · 05.09.2008, 02:18

Огромное спасибо =))) Блин, у вас работает на все 100%, теперь буду пытаться в свой проект внедрить =) спасибо вам большое ещё раз =)

KidsKilla · 05.09.2008, 03:04

способ от Mnilionic не подойдёт полупрозрачным пнг + ие 6 =/

а чего с ие7? чтобы ширина родителя была равна контенту а не 100% 2 варианта: float:left или display:inline. прозреваю 2й лучше.