2012-10-24 37 views
5
<!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> 

Tôi đang cố gắng đặt hình ảnh qua khung nội tuyến, nhưng vì lý do nào đó: trước khi bộ chọn không đi cùng với khung nội tuyến - hãy thử thay thế iframe bằng bất kỳ yếu tố và nó hoạt độngsử dụng: trước khi chọn trên khung nội tuyến

(hãy nhớ rằng iframe cần phải nằm trong các thẻ p)

+0

Nội dung của 'iframe' là một trang web riêng biệt; Tôi không nghĩ rằng bạn có thể áp dụng CSS từ cha mẹ. Nếu bạn có thể, bạn có thể sử dụng 'body :: before {/*...*/}' trong trang chứa, có thể? –

+1

nhưng không cố gắng đặt lớp phủ lên nội dung của khung nội tuyến - tôi đang cố gắng phủ lên đối tượng khung nội tuyến, đó là lý do tại sao tôi không nghĩ nó thực sự quan trọng – Ryan

+0

Bất kỳ lý do nào bạn phải sử dụng iframe: trước và không chỉ là đoạn văn bản gốc? – Jayx

Trả lời

4

tôi không chắc chắn về điều này, nhưng tôi nghĩ điều này sẽ không hiển thị trừ khi trình duyệt của người dùng không hỗ trợ iFrames.

Nếu bạn xem this answer, nó gợi ý rằng: trước và sau khi giả được đặt bên trong phần tử gốc, trong trường hợp này là iFrame.

Bây giờ chúng ta đi qua the docs và có thể suy ra các hành vi của iFrame trẻ em từ mã này:

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

Đó là để nói, họ chỉ hiển thị khi src của iFrame không được hiển thị. Một lần nữa, đây chỉ là suy luận, nhưng nó có vẻ giống như một lời giải thích hợp lý.

Các vấn đề liên quan