Есть ли: раньше не работал на img элементов?

Question

Я пытаюсь использовать селектор :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, это будет намного больше работы.

Answer 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="..." />');

});

Редактировать

По той причине, что это не поддерживается, посмотрите ответ coreyward .

Answer 2

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

Answer 3

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

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

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

Вы можете проверить 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"  
/>

Поддержка браузера

✓ Chrome 10 +

✓ Firefox 11 +

✓ Opera 9.8+

✓ Safari

Нет поддержки

⊗ Internet Explorer 8/9

Пожалуйста, проверьте в других браузерах

Answer 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>

Answer 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 Я создалПросто чтобы вы знали, что это кросс-браузер дружественный и нет необходимости обманывать код с «поддельным контентом».

Answer 6

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

html

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

CSS

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

Answer 7

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

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

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

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

Answer 8

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

Answer 9

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

Попробуй.