[css] : before CSS 의사 요소를 사용하여 모달에 이미지 추가

Modal절대 위치에 있고 부모 위에 Z- 인덱싱되고 JQuery로 멋지게 배치 된 CSS 클래스 가 있습니다. 모달 상자 상단에 캐럿 이미지 (^)를 추가하고 :beforeCSS 의사 선택기를 사용하여 깔끔하게 수행하는 방법을 살펴 보았습니다.

이미지는 절대 위치에 있어야하고 모달 위에 Z- 인덱싱되어야하지만 content속성 의 이미지에 적절한 클래스를 추가 할 방법을 찾지 못했습니다 .

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

두 번째로 좋은 옵션-콘텐츠 속성에 스타일을 인라인으로 추가 할 수 있습니까?

답변

http://caniuse.com/#search=:after

:after과 :before함께는 content그들이 적어도 5 개 버전 다시 인터넷 익스플로러가 아닌 다른 모든 주요 브라우저에서 지원하고 있습니다로 사용하기 괜찮아요. Internet Explorer는 버전 9 이상에서 완벽하게 지원되고 버전 8에서는 부분적으로 지원됩니다.

이것이 당신이 찾고있는 것입니까?

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

그렇지 않다면 좀 더 설명해 주시겠습니까?

또는 Joshua가 말한 것처럼 jQuery를 사용할 수 있습니다.

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

답변

배경 속성을 사용하여 해당 요소에 이미지를 제공해야하며 이전 대신 :: after를 사용합니다. 이렇게하면 요소 위에 이미 그려 져야합니다.

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

답변

1. 이것은 당신의 문제에 대한 나의 대답입니다.

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}

답변

콘텐츠와 이전은 모두 브라우저에서 매우 신뢰할 수 없습니다. 이것을 달성하기 위해 jQuery를 고수하는 것이 좋습니다. 이 당근을 추가해야하는지 여부를 파악하기 위해 무엇을하는지 잘 모르겠지만 전체적인 아이디어를 얻어야합니다.

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");