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


116

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

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

답변:


175

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


2
이. 브라우저 호환성에 대한 Joshua의 요점도 맞습니다. IE8은 이미지를 : after 콘텐츠로 렌더링하지만 부모의 경계를 벗어난 부분은 렌더링하지 않습니다.
RSG 2011

현재 (2017 년) IE 11은 여전히 ​​Microsoft에서 지원하는 유일한 IE 버전입니다. 따라서 IE8 호환성에 대해 걱정할 필요가 없습니다. 또한 CSS 솔루션은 훨씬 빠르게로드되는 경향이 있고 페이지가로드 된 후 레이아웃을 다시 작성하여 jQuery가 화면 깜박임을 유발할 수 있기 때문에 거의 항상 jQuery 솔루션보다 낫습니다.
Nosajimiki

1
@Nosajimiki는 오래된 브라우저에 대해 걱정해야하는지 여부는 대부분 방문자에게 달려 있습니다.
호세 Faeti

35

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

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

제안 해 주셔서 감사합니다. 모달에는 테두리가 있으므로 필요에 따라 배경 이미지를 사용하여 당근 이미지를 테두리 / bg 색상 위에 배치 할 수 없다고 생각합니다.
RSG 2011

왜 안돼? 가상 요소를 절대적으로 배치하면 여백을 사용하여 이동할 수 있습니다. 다른 요소 테두리 및 / 또는 bg 색상 위에 그려집니다.
Jose Faeti 2011

배경 이미지는 div의 테두리 밖으로 확장 할 수 없습니까?
RSG 2011

12
콘텐츠를 추가해야 할 수도 있습니다 : ''; 표시하기 위해 이것에
Willster 2014 년

13

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

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

5
background-size: 33px 16px; background-repeat: no-repeat;이미지 크기를 추가 했습니다!
Hasse Björk

-4

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

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

1
이것은 나를 슬프게한다. 우리는 자비 롭게 제한된 대상 브라우저 세트를 가지고 있으므로 CSS로 무엇을 할 수 있는지 여전히 관심이 있습니다.
RSG

CSS3에서 많이 사용되는 콘텐츠에도 불구하고 내가 본 것 중에는 여전히 어느 곳에서도 완전히 지원되지 않는 콘텐츠 중 하나입니다. 나는 이것이 악한 것을 주입 할 수 있다는 두려움과 관련이 있다고 믿습니다. 또한 콘텐츠에 주입 할 이미 존재하는 요소가 필요하다고 생각합니다. DOM을 자체적으로 많이 조작 할 수 있는지 확실하지 않습니다.
Joshua

4
이 대답은 브라우저에서 신뢰할 수없는 지원을 제공한다는 점에서 잘못되었습니다. Content그리고 after/before, 그것은 적어도 Firefox 3.5에서 적어도 크롬 9, 적어도 오페라 10.6 이상 사파리 3.2, iOS의 사파리의 모든 버전, 오페라 미니의 모든 버전, 모든 버전, IE8 이후 매 주요 브라우저에서 매우 안정적 일 것있다 Opera Mobile 및 Android 브라우저의 모든 버전입니다. 뭔가 크로스 브라우저를 지원하는 경우 당신이 알고 싶은 경우, 체크 아웃 : caniuse.com/#search=:after
android.nick

인터넷이 그렇다고해서 그것이 사실임을 의미하지는 않습니다. 그들과 함께 작업하면 모든 브라우저에서 다르게 작동합니다. 그리고 IE 7은 여전히 ​​매우 인기있는 브라우저로 둘 중 하나를 지원하지 않습니다.
Joshua

3
사실, 당신은 더 나은 오프에있는 CSS이상 JavaScript이 하나. 브라우저가 아무리 날카 롭더라도 사용자는 여전히 JavaScript비활성화 할 수 있습니다 . 다행히이 경우 :before:after선택기는 널리 지원됩니다. quirksmode.org/css/selectors
Steve Buzonas 2014
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.