:before는 img 요소에서 작동하지 않습니까?

:before는 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요소들, 이것은 훨씬 더 많은 일이 될 것입니다.

유감스럽게도 대부분의 브라우저는 사용을 지원하지 않습니다.:after또는:beforeimg 태그에.

http://lildude.co.uk/after-css-property-for-img-tag

그러나 JavaScript/jQuery를 사용하여 필요한 작업을 수행할 수 있습니다.이 바이올린을 확인해 보십시오.

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

편집:

이것이 지원되지 않는 이유는 코리워드의 답변을 확인하십시오.

유사 선택기 전후에는 HTML 요소를 삽입하지 않고 대상 요소의 기존 내용 앞이나 뒤에 텍스트를 삽입합니다.이미지 요소에 텍스트가 없거나 하위 항목이 없기 때문에img:before또는img:after당신에게 어떤 도움이 될 것입니다.이는 다음과 같은 요소의 경우에도 해당됩니다.<br>그리고.<hr>같은 이유로

저는 이 일을 순수한 css로 만드는 방법을 찾았습니다.

나는 단지 가짜 컨텐츠-방법일 뿐입니다.

img:after를 활성화하는 순수 CSS 방법.

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"  
/>

브라우저 지원

◦ 크롬 10+

◦ 파이어폭스 11+

◦ 오페라 9.8+

◦ 사파리

지원 없음

Internet Explorer 8 / 9

다른 브라우저에서 테스트하십시오.

대체된 요소의 특성으로 인해 문서 스타일은 영향을 받지 않습니다.

어쨌든 참조하기 위해 에서는 다음과 같이 유사 요소를 연결할 수 있는 이상적인 네이티브 래퍼를 제공합니다.

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>

다음은 사용 중인 img에 대한 div 컨테이너를 사용하는 다른 솔루션입니다.: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 또는 스팬(또는 대부분의 다른 태그)과 함께 작동합니다.

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

으로 포함된,으로 닫는 태그이고, 태그가 에 그수 (은 img와 같은 .)<img>Content</img>하지만 물론 그것은 효과가 없습니다.)

저는 이것이 오래된 주제라는 것을 알지만, 구글에서 먼저 뜨기 때문에, 이것이 다른 사람들이 배우는 데 도움이 되기를 바랍니다.

::fore 및 ::fore에서 생성된 유사 요소는 요소의 형식 상자에 포함되므로 img와 같은 대체된 요소나 br 요소에는 적용되지 않습니다.

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

이러한 경우에는 다음을 사용하는 것이 좋습니다.<figure>할 수 . 그림 바로 할 수 . .

예

<div class="exemple">
  <figure>
    <img src="img1.jpg"/>
  </figure>
  <figure>
    <img src="img2.jpg"/>
  </figure>
</div>

이것은 나에게 효과가 있습니다.

html

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

CSS

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

::after 이미지의 폴백 이미지를 표시하는 데 사용할 수 있습니다.

---

, 2 아의예시오, 처음 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">

<img>는 대체된 요소이며 :before 또는 :fseudo-patched를 사용한 후 이미지 로드에 실패하거나 그렇지 않으면 작동하지 않습니다.이미지 로드 실패 시 예비 기능을 사용하려면 https://stackoverflow.com/a/71478688/14204452 을 참조하십시오.

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

이 코드를 사용해 보십시오.

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

저는 그렇게 하는 더 간단한 방법을 찾았습니다.HTML은 다음과 같습니다.

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

제가 한 일은 빈 공간을<p>내 이미지 태그 뒤에 태그를 붙입니다.이제 p::fore를 사용하여 이미지를 표시하고 필요에 따라 배치하겠습니다.에 CSS다음입은 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');
}

먹어봐.

이전 요소에서 :: 뒤에 시도합니다.

이미지에 "위치: 상대적"을 지정하기만 하면 작동합니다.

언급URL : https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements