Есть ли: раньше не работал на img элементов?
Я пытаюсь использовать :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 элементы, это будет намного больше работы.
16 ответов
К сожалению, большинство браузеров не поддерживают использование :after или же :before на тегах img.
http://lildude.co.uk/after-css-property-for-img-tag
Тем не менее, вы можете выполнить то, что вам нужно, с помощью JavaScript/jQuery. Проверьте эту скрипку:
http://jsfiddle.net/xixonia/ahnGT/
$(function() {
$('.target').after('<img src="..." />');
});
Редактировать:
По той причине, что это не поддерживается, проверьте ответ coreyward.
Псевдоселекторы до и после не вставляют элементы HTML - они вставляют текст до или после существующего содержимого целевого элемента. Поскольку элементы изображения не содержат текста или имеют потомков, ни img:before или же img:after пойдет тебе на пользу. Это также относится к таким элементам, как <br> а также <hr> по той же причине.
Я нашел способ сделать эту работу в чистом CSS:
Я просто фальшивый контент-метод
чистый метод CSS для включения img:after.
Вы можете проверить CodePen: я просто фальшивый контент или вижу источник.
Источник
HTML
<img
alt="You are watching the ~ I'm just fake content ~ method"
/>
CSS
img {
/* hide the default image */
height:0;
width:0;
/* hide fake content */
font-size:0;
color:transparent;
/* enable absolute position for pseudo elements */
position:relative;
/* and this is just fake content */
content:"I'm just fake content";
}
/* initial absolute position */
img:before,
img:after {
position:absolute;
top:0;
left:0;
}
/* img:before - chrome & others */
img:before {
content:url(http://placekitten.com/g/250/250);
}
/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
padding:125px;
background:url(http://placekitten.com/g/250/250) no-repeat;
}
/* img:after */
img:after {
/* width of img:before */
left:250px;
content:url(http://lorempixel.com/350/200/city/1);
}
Поддержка браузера
✓ Chrome 10+
✓ Firefox 11+
✓ Опера 9.8+
✓ Сафари
Никакой поддержки
⊗ Internet Explorer 8 / 9
Пожалуйста, проверьте в других браузерах
Из-за характера <img> будучи замененным элементом, стиль документа не влияет на это.
Чтобы ссылаться на это в любом случае, <picture> предоставляет идеальную встроенную оболочку, к которой могут быть прикреплены псевдоэлементы, например:
img:after, picture:after{
content:"\1F63B";
font-size:larger;
margin:-1em;
}<img src="//placekitten.com/110/80">
<picture>
<img src="//placekitten.com/110/80">
</picture>Вот еще одно решение, использующее контейнер div для img при использовании :hover::after добиться эффекта.
HTML выглядит следующим образом:
<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
CSS следующим образом:
#img_container {
margin:0;
position:relative;
}
#img_container:hover::after {
content:'';
display:block;
position:absolute;
width:300px;
height:300px;
background:url('');
z-index:1;
top:0;
}
Чтобы увидеть это в действии, посмотрите созданную мной скрипку. Просто чтобы вы знали, что это кросс-браузер дружественный и нет необходимости обманывать код с "поддельным контентом".
Я думаю, что лучший способ понять, почему это не работает, - это до и после вставки их содержимого до или после содержимого в теге, к которому вы их применяете. Таким образом, он работает с элементами div или span (или большинством других тегов), потому что вы можете поместить в них контент.
<div>
:before
Content
:after
</div>
Тем не менее, img является самодостаточным, самозакрывающимся тегом, и поскольку у него нет отдельного закрывающего тега, вы ничего не можете поместить в него. (Это должно быть похоже на <img>Content</img>, но, конечно, это не работает.)
Я знаю, что это старая тема, но она сначала появляется в Google, так что, надеюсь, это поможет другим учиться.
Псевдоэлементы, генерируемые:: before и:: after, содержатся в блоке форматирования элемента и поэтому не применяются к заменяемым элементам, таким как img, или элементам br.
В этих случаях предпочтительнее использовать
<figure>тег, который позволяет вам оптимально управлять css Этот способ вы можете использовать после только на рисунке
Пример
<div class="exemple">
<figure>
<img src="img1.jpg"/>
</figure>
<figure>
<img src="img2.jpg"/>
</figure>
</div>
::after может использоваться для отображения резервного изображения изображения
См. Пример ниже, первые 2 imgТеги указывают на неработающие URL-адреса. Но второй отображает резервное изображение вместо сломанного логотипа браузера по умолчанию. Однако я не уверен, что это практично, мне сложно заставить его работать правильно.
img {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
vertical-align: top;
}
img:not(:first-child)::after {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
content: "<" attr(alt) "> NOT FOUND";
border: 1px dashed #999;
background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">Этот работает для меня:
HTML
<ul>
<li> name here </li>
</ul>
CSS
ul li::before {
content: url(../images/check.png);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#image img{
display: inline-block;
max-width: 50%;
}
#image::after {
position: absolute;
top: 0;
content: url('https://img.icons8.com/plasticine/100/000000/about.png');
}
</style>
<title>img before</title>
</head>
<body>
<a id="image" href="">
<img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
</a>
</body>
</html>
<img> — это заменяемый элемент, и использование псевдоэлементов :before или :after для него работает, если изображение не загружается, а в противном случае оно не работает. Если вы намерены использовать запасной вариант в случае сбоя загрузки изображения, см. https://stackoverflow.com/a/71478688/14204452 .
Я попытался и нашел более простой способ сделать это. Вот HTML-код:
<img id="message_icon" src="messages2.png">
<p id="empty_para"></p>
Я сделал пустое место <p> тег после моего изображения тега. Теперь я буду использовать p::before, чтобы показать изображение и расположить его в соответствии с моими потребностями. Вот CSS:
#empty_para
{
display:inline;
font-size:40;
background:orange;
border:2px solid red;
position:relative;
top:-400px;
left:100px;
}
#empty_para::before
{
content: url('messages.png');
}
Попытайся.
Просто укажите для изображения "position: relative", и оно будет работать.
Попробуйте этот код
.button:after {
content: ""
position: absolute
width: 70px
background-image: url('../../images/frontapp/mid-icon.svg')
display: inline-block
background-size: contain
background-repeat: no-repeat
right: 0
bottom: 0
}