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

September 3, 2008

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

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

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

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

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

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

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

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

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

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

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

ZoNT · September 4, 2008

кладёшь всё в див (всте три картинки). Основная просто лежит, "прищепки" делаешь с абсолютным позиционированием. Первую прищепрку топ=-20рх , лефт=5рх (сам подгонишь), вотрую - топ=-20рх, райт(!!! - она будет позиционироваться по правому краю дива)=-10рх

Vlad · September 4, 2008

Как вариант - правую прищепку загоняешь в угол через float:right, далее position: relative; top: y; right: x; x и y зависят от желания. Картинку с прищепкой добавляешь до основной картинки или после, поскольку высота картинки известна.

Amigos · September 4, 2008

формулы, извращения какие-то.

создаешь контейнер

левую каритнку кладеш слева .

правую на выбор.

float: right;

position: absolute; margin-right: 0; или right: 0;

..............................

ZoNT · September 4, 2008

формулы, извращения какие-то.
создаешь контейнер
левую каритнку кладеш слева .
правую на выбор.
float: right;
position: absolute; margin-right: 0; или right: 0;
..............................

просмотрел топик пару раз, формул не заметил...

Amigos · September 4, 2008

формула (от лат. formula — уменьшительное от forma — образ, вид ) — всякая символическая запись (в виде выражения, равенства или неравенства), содержащая какую-либо информацию.

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

... ещё глупые комменты будут?!

ZoNT · September 4, 2008

формула (от лат. formula — уменьшительное от forma — образ, вид ) — всякая символическая запись (в виде выражения, равенства или неравенства), содержащая какую-либо информацию.

float: right;
position: absolute; margin-right: 0; или right: 0;

... ещё глупые комменты будут?!

Amigos · September 4, 2008

формула (от лат. formula — уменьшительное от forma — образ, вид ) — всякая символическая запись (в виде выражения, равенства или неравенства), содержащая какую-либо информацию.

а я думаю это не глупо тем более что это сказали Пифагор, Евклид, Платон Аристотель.

- безусловно глупо

float: right;
position: absolute; margin-right: 0; или right: 0;

если не нравится формуллировка - "личный совет", тогда довольствуйся "обобщением всего выше сказанного и

Vladом и тобой в том числе"

- безусловно глупо

ещё глупые комменты будут?!

...- безусловно НЕ глупо.

Вобщем о своём IQ Вы можете судить сами.

Edited September 4, 2008 by Amigos

September 4, 2008

Всем спасибо.

Я попытался сделать то, что описали тут, но у меня не получалось, мне повезло, что мне помогли и привели пример кода, который меня вполне устраивает:

<!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="200px" />
</div>


</body>
</html>

Помогли найти решение тут: http://www.flasher.ru/forum/showthread.php?p=762190#poststop

Ещё раз спасибо всем, кто откликнулся.

Sign In

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

Question

Guest Flashist

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Amigos

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Amigos

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Amigos

Link to comment

Share on other sites

Guest Flashist

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information