Делает: до того, как не работать с элементами 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, но если я применил класс overlay к img сам он не работает.

Я хочу, чтобы это работало, потому что лишний span оскорбляет меня, но что более важно, у меня есть около 100 сообщений в блоге, которые я бы хотел изменить, и я могу сделать это за один раз, если я может просто изменить таблицу стилей, но если мне нужно вернуться и добавить дополнительный элемент span между элементами a и img, это будет намного больше работать.

ОТВЕТЫ

Ответ 1

К сожалению, большинство браузеров не поддерживают использование :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="..." />');

});

Edit

По этой причине это не поддерживается, проверьте ответ со стороны Coreyward.

Ответ 2

Псевдоэлементы до и после не вставляют элементы HTML - они вставляют текст до или после существующего содержимого целевого элемента. Поскольку элементы изображения не содержат текст или имеют потомки, ни img:before, либо img:after не принесут вам никакой пользы. Это также относится к элементам типа <br> и <hr> по той же причине.

Ответ 3

Я нашел способ сделать эту работу в чистом CSS:

Я просто фальшивый контент-метод

чистый метод CSS для включения img: after.

Вы можете проверить CodePen: я просто фальшивый контент или вижу источник.

Источник и фрагмент

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);
}
<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

Ответ 4

Из-за того, что <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>

Ответ 5

Здесь другое решение, использующее контейнер 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;
}

Чтобы увидеть это в действии, просмотрите fiddle, который я создал. Просто, чтобы вы знали, что это кросс-браузер, и нет необходимости обманывать код с помощью "поддельного контента".

Ответ 6

Я думаю, что лучший способ понять, почему это не работает, - это до и после вставки их содержимого до или после содержимого в теге, к которому вы их применяете. Таким образом, он работает с элементами div или span (или большинством других тегов), потому что вы можете помещать содержимое в них.

<div>
:before
Content
:after
</div>

Тем не менее, img является самодостаточным, самозакрывающимся тегом, и поскольку у него нет отдельного закрывающего тега, вы ничего не можете поместить в него. (Это должно выглядеть как <img>Content</img>, но, конечно, это не работает.)

Я знаю, что это старая тема, но она сначала появляется в Google, так что, надеюсь, это поможет другим учиться.

Ответ 7

Этот работает для меня:

HTML

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

Ответ 8

Попробуйте :: after на предыдущем элементе.

Ответ 9

Псевдоэлементы, сгенерированные с помощью :: before и :: after, содержатся в блоке форматирования элемента и, следовательно, не применяются к заменяемым элементам, таким как img, или к элементам br.

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Ответ 10

Попробуйте этот код

.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
}

Ответ 11

Я попробовал и нашел более простой способ сделать это. Вот 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');
}

Попробуйте.