Я пытаюсь использовать :before
селектор, чтобы поместить изображение поверх другого изображения, но я обнаружил, что просто не получается поместить изображение перед img
элементом, а только каким-то другим элементом. В частности, мои стили:
.container
{
position: relative;
display: block;
}
.overlay:before
{
content: url(images/[someimage].png);
position: absolute;
left:-20px;
top: -20px;
}
и я считаю, что это работает нормально:
<a href="[url]" class="container">
<span class="overlay"/>
<img width="200" src="[url]"/>
</a>
но это не
<a href="[url]" class="container">
<img width="200" src="[url]" class="overlay"/>
</a>
Вместо этого я могу использовать элемент div
или , и браузер корректно накладывает мое изображение поверх изображения в элементе, но если я применяю класс оверлея к самому себе, он не работает.p
span
img
img
Я хотел бы, чтобы это работало, потому что это span
меня оскорбляет, но что более важно, у меня есть около 100 сообщений в блоге, которые я хотел бы изменить, и я могу сделать это за один раз, если бы я мог просто изменить таблицу стилей, но если я должен вернуться назад и добавить дополнительный span
элемент между a
и img
элементами, это будет намного больше работы.
Ответы:
К сожалению, большинство браузеров не поддерживают использование
:after
или использование:before
тегов img.http://lildude.co.uk/after-css-property-for-img-tag
Тем не менее, вы можете выполнить то, что вам нужно, с помощью JavaScript / jQuery. Проверьте эту скрипку:
http://jsfiddle.net/xixonia/ahnGT/
Редактировать :
По той причине, что это не поддерживается, проверьте ответ coreyward .
источник
Псевдоселекторы до и после не вставляют элементы HTML - они вставляют текст до или после существующего содержимого целевого элемента. Поскольку элементы изображения не содержат текст или иметь потомков, ни
img:before
илиimg:after
будет делать вам никакой пользы. Это также относится к таким элементам, как<br>
и<hr>
по той же причине.источник
content: url(/img/foo.jpg);
синтаксис. См. W3.org/TR/CSS21/generate.html для деталей.Я нашел способ сделать эту работу в чистом CSS:
Я просто поддельные содержание -метод
чистый метод CSS для включения img: after.
Вы можете проверить CodePen: я просто фальшивый контент или посмотреть источник .
Источник и фрагмент
Поддержка браузера
✓ Chrome 10+
✓ Firefox 11+
✓ Опера 9.8+
✓ Сафари
Нет поддержки
⊗ Internet Explorer 8/9
Пожалуйста, проверьте в других браузерах
источник
Из-за того,
<img>
что элемент заменяется , стиль документа на него не влияет.Чтобы сослаться на него в любом случае,
<picture>
предоставляется идеальная нативная оболочка, к которой могут быть прикреплены псевдоэлементы, например:источник
Вот еще одно решение, использующее контейнер div для img при использовании
:hover::after
для достижения эффекта.HTML выглядит следующим образом:
CSS следующим образом:
Чтобы увидеть это в действии, посмотрите созданную мной скрипку . Просто, чтобы вы знали, что это кросс-браузер дружественный и нет необходимости обманывать код с «поддельным контентом».
источник
display: inline-block
к#img_container
. Это сделает ширину контейнера равной изображению при всех размерах экрана. Таким образом, вы не получите:after
контент, плавающий за пределами изображения.Я думаю, что лучший способ понять, почему это не работает, - это до и после вставки их содержимого до или после содержимого в теге, к которому вы их применяете. Таким образом, он работает с элементами div или span (или большинством других тегов), потому что вы можете помещать содержимое в них.
Тем не менее, img является самодостаточным, самозакрывающимся тегом, и поскольку у него нет отдельного закрывающего тега, вы ничего не можете поместить в него. (Это должно было бы выглядеть
<img>Content</img>
, но, конечно, это не работает.)Я знаю, что это старая тема, но она сначала появляется в Google, так что, надеюсь, это поможет другим учиться.
источник
Этот работает для меня:
HTML
CSS
источник
Псевдоэлементы, созданные с помощью :: before и :: after, содержатся в блоке форматирования элемента и, следовательно, не применяются к заменяемым элементам, таким как img, или к элементам br.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
источник
::after
может использоваться для отображения запасного изображенияСмотрите пример ниже, первые 2
img
тега указывают на неработающие URL. Но второй отображает запасное изображение вместо сломанного логотипа по умолчанию из браузера. Тем не менее, я не уверен, что это практично, я считаю довольно сложно заставить его работать правильно.источник
Попробуйте этот код
источник
Я попытался и нашел более простой способ сделать это. Вот HTML-код:
То, что я сделал, это поместил пустой
<p>
тег после моего тега изображения. Теперь я буду использовать p :: before, чтобы показать изображение и расположить его в соответствии с моими потребностями. Вот CSS:Попытайся.
источник
Попробуйте :: после предыдущего элемента.
источник