Вопросец по css

[alexmurphy 45]

В общем, имеется тег <img> необходимо сделать чтобы

background: url('overlay.png'); описанный в css, отображался поверх основного изображения, дополнительные div-ы в html добавлять нельзя. Все изменения только в пределах css класса .img.

ps overlay.png должен отображаться всегда поверх картинки, а не после каких-либо событий.

Стандартными средствами css сделать не получается.

[Critical Error 155]

Вы определитесь, вам для тега img нужен css или для класса img?

Насколько могу судить, для тега img вообще нелогично в css фон описывать.

Что это за картинка overlay.png, в смысле что на ней? Слова или просто прозрачная?

[Lomot 134]

Насколько могу судить, для тега img вообще нелогично в css фон описывать.

точно, его все равно картинка перекроет.

ps overlay.png должен отображаться всегда поверх картинки, а не после каких-либо событий.

для этого надо разместить какой либо элемент за тегом img, как то так:

<img src="image.jpg" alt="" /><i class="overlay">&nbsp;</i>

[alexmurphy 45]

для этого надо разместить какой либо элемент за тегом img, как то так:

<img src="image.jpg" alt="" /><i class="overlay">&nbsp;</i>

>Все изменения только в пределах css класса .img.

Вы определитесь, вам для тега img нужен css или для класса img?

Насколько могу судить, для тега img вообще нелогично в css фон описывать.

Что это за картинка overlay.png, в смысле что на ней? Слова или просто прозрачная?

Что непонятно-то?

есть css

.img {

background: url('overlay.png');

}

есть html

<img src="myimage.jpg" alt='alt text' />

Нужно чтобы бэкграунд располагался поверх картинки, а не наоборот.

[Captain 623]

Нужно чтобы бэкграунд располагался поверх картинки, а не наоборот.

фоновое изображение не может быть поверх.

[WWW.ZEOS.IN 1 161]

alexmurphy, если Вы хотите, чтобы Вам помогли, то покажите примеры, как это сейчас, как должно быть, для чего это, куда и зачем

Я, например, хотел помочь, но так и не понял, что именно надо и как должно быть

[Critical Error 155]

есть css

.img {

background: url('overlay.png');

}

есть html

<img src="myimage.jpg" alt='alt text' />

Вот я еще раз спрашиваю, вам для тега img нужен css или для класса img?

Внимательней посмотрите на тот код что вы дали.

В принципе, вариант решения уже крутится в голове, но вы ответ дайте на вопрос, который я вам задал.

[alex32 942]

исходя из названия картинки overlay, я так понимаю, человек хочет, что бы на картинки автоматом накладывалась рамка.

[n0lik 75]

В принципе, вариант решения уже крутится в голове, но вы ответ дайте на вопрос, который я вам задал.

По определению не возможно сделать так как Вы этого хотите, Вам дали правильный ответ в сообщении №3. Без добавления кода в страницу, при помощи только одного стиля сие сделать пока не реально.

[Critical Error 155]

По определению не возможно сделать так как Вы этого хотите, Вам дали правильный ответ в сообщении №3. Без добавления кода в страницу, при помощи только одного стиля сие сделать пока не реально.

Да ладно!? Есть такое свойство в css как content

Изменено 30 августа 2011 пользователем Critical Error

[n0lik 75]

Да ладно!? Есть такое свойство в css как content

Так напишите решение, а мы посмотрим.

[Critical Error 155]

Будете должны. Все

img:before { content: url("overlay.png"); position: absolute; }

исходя из названия картинки overlay, я так понимаю, человек хочет, что бы на картинки автоматом накладывалась рамка.

Это можно даже без overlay.png сделать. Для этого просто border прописываете непосредственно для тега img. Если хотите чтобы между рамкой и картинкой был зазор, устанавливаете padding.

Если это то что нужно, так нужно было описать суть задачи изначально.

[alexmurphy 45]

alexmurphy, если Вы хотите, чтобы Вам помогли, то покажите примеры, как это сейчас, как должно быть, для чего это, куда и зачем

Я, например, хотел помочь, но так и не понял, что именно надо и как должно быть

Пример:

<style type="text/css">

img {

background: url('overlay.png');

}

</style>



<img src="myimage.jpg" alt='alt text' />

как должно быть

overlay.png должен располагаться поверх myimage.jpg

как это сейчас

сейчас myimage.jpg располагается поверх overlay.png

Будете должны. Все

img:before { content: url("overlay.png"); position: absolute; }

исходя из названия картинки overlay, я так понимаю, человек хочет, что бы на картинки автоматом накладывалась рамка.

Это можно даже без overlay.png сделать. Для этого просто border прописываете непосредственно для тега img. Если хотите чтобы между рамкой и картинкой был зазор, устанавливаете padding.

Если это то что нужно, так нужно было описать суть задачи изначально.

Спасибо попробую,

border не нужен, нужна именно картинка поверх картинки, помимо border можно еще outline использовать.

Изменено 30 августа 2011 пользователем alexmurphy

[Critical Error 155]

Ну делайте так как я написал через пост выше.

[WWW.ZEOS.IN 1 161]

alexmurphy, тогда используйте вариант, который написал пользователь Critical Error

На всякий случай скажу, что в DLE есть возможность накладывать вотермарки на картинки хотя может Вы хотите сделать что-то другое.

[alexmurphy 45]

Ну делайте так как я написал через пост выше.

Попробовал, работает в опере, в FF и хроме не работает.

[Critical Error 155]

Увы, не знаю почему.

[WWW.ZEOS.IN 1 161]

дополнительные div-ы в html добавлять нельзя.

Можно узнать почему? Кто запрещает?

[alexmurphy 45]

дополнительные div-ы в html добавлять нельзя.

Можно узнать почему? Кто запрещает?

Религия запрещает

а если серьезно, изображение является ссылкой

<a href="blablalba"><img src="myimage.jpg" alt='alt text' /></a>

поэтому если добавить div и сдвинуть его, то ссылка перестанет быть кликабельной

[Lomot 134]

Религия запрещает

а если серьезно, изображение является ссылкой

Вот так можно сделать?

<div>

<a href="#">la la la</a>

<img src="image.jpg" alt="" />

</div>

Если можно - скажу как сделать.

Ссылка по прежнему будет поверх картинки.

Изменено 30 августа 2011 пользователем Lomot

[alexmurphy 45]

Нет, так нельзя, ссылкой должно быть изображение, а не текст.

[Lomot 134]

ссылка будет поверх изображения, текста не будет.

[alexmurphy 45]

Сделал следующим образом:

<style>

a:after { content: url("overlay.png"); position: absolute; }

</style>


<a href="blablalba"><img src="myimage.jpg" alt='alt text' /></a>

Получилось как раз так как надо было,

всем спасибо

[WWW.ZEOS.IN 1 161]

alexmurphy, в IE работать не будет

[alexmurphy 45]

в 9м работает, для более ранних есть лекарство

www.xiper.net/collect/html-and-css-tricks/glyuki-brauzerov/IE/after-before-for-ie.html