za pomocą: przed selektorem na iframe

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

Próbuję umieścić obraz nad iframe, ale z jakiegoś powodu: przed selektor nie zgadza się z iframe - spróbuj zastąpić iframe innym Element i działaza pomocą: przed selektorem na iframe

(proszę pamiętać, że iframe musi być wewnątrz znaczników p)

Źródło

2012-10-24 Ryan

Zawartość 'iframe' jest oddzielną stroną internetową; Nie sądzę, że możesz zastosować CSS od rodzica. Jeśli jesteś w stanie, możesz użyć 'body :: before {/ *...*/}' na stronie zawartej? –

ale nie próbuję nakładać nakładki na zawartość iframe - ja próbuję nakładać na obiekt iframe, dlatego nie sądzę, by to miało naprawdę znaczenie – Ryan

Każdy powód, dla którego musisz użyć elementu iframe: before i nie tylko jest to akapit nadrzędny? – Jayx

nie jestem pewien na ten temat, ale myślę, że to nie będą wyświetlane, chyba przeglądarce użytkownika nie obsługuje iFrames.

Jeśli przyjrzeć się this answer, sugeruje, że: pseudoelementy: before i: after są umieszczane wewnątrz elementu nadrzędnego, którym w tym przypadku jest iFrame.

Teraz musimy udać się the docs i można wywnioskować zachowanie dzieci iFrame z tym kodem:

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

To znaczy, one wyświetlane tylko wtedy, gdy src z iFrame nie jest wyświetlany. Ponownie, jest to tylko wnioskowanie, ale wydaje się prawdopodobne wyjaśnienie.

Źródło

2012-10-24 19:53:11 jmeas

za pomocą: przed selektorem na iframe

Odpowiedz

Powiązane problemy