iframe의 : before 선택자를 사용하여

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      #test iframe { 
       border: none; 
       background: #333; 
       width: 500px; 
       height: 500px; 
       overflow: hidden; 
      } 

      #test iframe:before { 
       display: block; 
       content: " test"; 
       width: 500px; 
       height: 500px; 
       background: url('overlay.png') no-repeat; 
       position: relative; 
       top: 0px; 
       left: 0px; 
       z-index: 999; 
      } 
     </style> 
    </head> 
<body> 
    <div id="test"> 
     <p><iframe></iframe></p> 
    </div> 
</body> 
</html>

iframe 위에 이미지를 놓으려고하고 있는데 : before selector가 iframe과 잘 어울리지 않습니다. iframe을 다른 것으로 교체해보십시오. 요소는 iframe의 : before 선택자를 사용하여

을 나는이에 확실하지 않다

출처

2012-10-24 Ryan

'iframe'의 내용은 별도의 웹 페이지입니다. 나는 당신이 부모로부터 CSS를 적용 할 수 있다고 생각하지 않는다. 가능하다면, 포함 된 페이지에서'body :: before {/*...*/}'를 사용할 수 있습니다. 아마도? –

하지만 iframe의 내용에 오버레이를 넣으려고하지 않고 있습니다. 즉, iframe 객체 자체에 오버레이를 넣으려는 것입니다. 그 이유는 내가 정말로 중요하다고 생각하지 않는 이유입니다. – Ryan

iframe을 사용해야하는 이유 : before 및 before 부모 단락 일뿐만 아니라? – Jayx

(iframe이가 P 태그 내에서 할 필요가 있음을 명심하시기 바랍니다)하지만 난이 표시되지 않습니다 생각하고 작동하는 사용자의 브라우저하지 않는 한 iFrames를 지원하지 않습니다.

this answer을 살펴보면, : before 및 : after pseudoelements가 상위 요소 (이 경우 iFrame) 내에 배치되어 있음을 나타냅니다.

이제 우리는 the docs로 향할이 코드에서 iframe이 아이들의 행동을 추론 할 수있다 : iframe이의 src가 표시되지 않을 때 말을하는 것입니다

<iframe src="page.html" width="300" height="300"> 
    <p>Your browser does not support iframes.</p> 
</iframe>

, 그들은에만 표시됩니다. 다시 말하지만 이것은 단지 추론이지만 그럴듯한 설명처럼 보입니다.

출처

2012-10-24 19:53:11 jmeas

iframe의 : before 선택자를 사용하여

답변

관련 문제