Tôi đang tìm một số cách khác để làm:Không có thuộc tính "allowtransparency"
<iframe transparency=true ...
Khi tôi làm việc xác nhận W3C, tôi nhận được lỗi:
Column 31: there is no attribute "allowtransparency"
Nếu sử dụng này CSS,
.iframe-trans-fix{
opacity: 0;
filter:alpha(opacity=0);
}
cho đoạn mã trên tôi nhận được khung nội tuyến trống.
Mặc dù thông số HTML của W3C không xác định, nhưng có thuộc tính allowTransparency và được hỗ trợ bởi tất cả các trình duyệt hiện đại (và Internet Explorer). Như HTML5 đã dạy chúng tôi, giỏ hàng được cho là trước khi con ngựa.
Giả sử bạn có HTML này trên trang chính của bạn, index.html:
<html>
<body>
<iframe src="source.html"
allowTransparency="true"
style="background-color:lightgreen;"
width="400" height="200">
</iframe>
</body>
</html>
Và source.html của bạn trông như thế này:
<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris
augue et dui. </p>
</body>
</html>
Khi bạn mở trang chính (index. html) trong trình duyệt của bạn, bạn sẽ thấy văn bản từ source.html trong iframe, nhưng nó sẽ có nền màu xanh nhạt.
(Tested với Safari, Firefox và Chrome trên Mac OS X và trình duyệt Internet Explorer 8 và Chrome trên Windows XP)
Chỉnh sửa: Điều quan trọng là đây: Trang nguồn không thể thiết lập nền của riêng mình. Nếu có, nó sẽ bỏ qua nền trong suốt.
Tôi không chắc chắn những gì bạn đang cố gắng làm ở đây, nhưng điều này nên được những gì bạn đang tìm kiếm:
iframe {
background-color: transparent;
}
Đây là, tất nhiên, giả định rằng bạn muốn nền cho iframe minh bạch.
Không có thuộc tính HTML tên transparency, vì vậy bạn sẽ luôn nhận được một lỗi với iframe transparency=true
nếu bạn thiết lập opacity để không, bạn sẽ không thấy nguyên tố này ở tất cả - bạn cần để xác định mức độ opacity:
opacity: 0.25; /* all modern browsers */
filter: alpha(opacity=25) /* IE */
CSS ở trên (lưu ý: giá trị opacity là 0-100 cho IE, 0-1 cho các trình duyệt khác) sẽ cho phép các phần tử khác phía sau (ví dụ: một hình nền trang) để hiển thị thông qua, ngay cả khi phần tử có cài đặt độ mờ có nền màu.
Để kiểm soát nhiều hơn về độ trong suốt, hãy xem RGBA (A = alpha), nhưng hãy chú ý hỗ trợ trình duyệt có thể thay đổi.
trong IE, iframe tôi đi suốt, nhưng điều này là i cant thể xem nội dung của tôi bên trong iframe cũng .. – Bharanikumar
Bạn có thể đưa lên một trang mẫu không? Nếu nội dung của iframe hoàn toàn vô hình, thì tôi đoán (không nhìn thấy) rằng: không nhận được nội dung khung nội tuyến, nội dung kế thừa một cài đặt CSS khác, hoặc (kiểm tra rõ ràng nhưng đáng giá) đó là thuộc tính màu giống như màu nền. Đặt màu của nó thành màu đỏ và loại bỏ quy tắc độ mờ - nó vẫn không xuất hiện? –
Đầu tiên, không có thứ gì như 'transparency =' true '', do đó, điều đó sẽ không hoạt động.
Thứ hai, bạn đang cố gắng làm nền trong suốt hoặc toàn bộ iframe trong suốt?
Thuộc tính CSS Opacity làm cho mọi thứ bên trong bất kỳ phần tử nào bạn sử dụng nó trong suốt. Opacity quy mô từ 0 đến 1, trong đó 0 là hoàn toàn xem qua, 0,5 là một nửa trong suốt, và 1 là hoàn toàn có thể nhìn thấy.
Nếu bạn sử dụng tính năng này trên div hoặc khung nội tuyến (hoặc bất kỳ thứ gì) nền và văn bản sẽ bị mờ nhạt như nhau.
Mặt khác, trong mọi trình duyệt hiện đại, bạn có thể đặt backround thành một phần trong suốt bằng cách sử dụng màu RGBA. Bạn nên làm điều đó như thế này:
iframe.transparent {
background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/
background-color: rgba(255,255,255,0.5);
}
Các RGBA nét màu hoạt động giống như các thuộc tính opacity (0 = clear, 1 = rắn), ngoại trừ nó chỉ làm cho các mục cụ thể mà bạn đặt nó vào trong suốt và không ảnh hưởng các mục bên trong mục đó (tức là nó không ảnh hưởng đến văn bản bên trong khung nội tuyến của bạn). Ba số đầu tiên là các giá trị màu đỏ, xanh lục và xanh dương trên thang điểm từ 0 đến 255.
Nếu bạn muốn có giải pháp trình duyệt chéo tốt hơn, tôi khuyên bạn chỉ nên sử dụng trong suốt .png tệp dưới dạng hình nền.Bạn sẽ phải kiểm tra điều này trên IE, không chắc chắn nếu nó sẽ hoạt động cho một iframe cụ thể, nhưng bạn không thể đặt nền trên khung nội tuyến và sau đó đặt hình ảnh trong suốt làm nền của trang bạn tải bên trong khung nội tuyến (áp dụng nó cho phần tử cơ thể cho trang đó).
Hy vọng điều này sẽ hữu ích!
đây là những thay đổi, theo mẫu trên,
nhưng vẫn không có cập nhật, trong IE ifram của tôi có màu trắng nhưng trang web có màu đen BG – BharanikumarBạn có thể chia sẻ liên kết đến trang bạn đang làm việc để tôi có thể xem toàn bộ mã không? – Andrew
Có một cách bạn có thể làm điều này với jQuery nếu bạn đã bao gồm các tập tin jQuery -
<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->
Thay đổi .classname như của iframe của bạn hoặc làm một nếu không có một. (Đưa ra các thuộc tính từ khung nội tuyến là tốt) Đặt ngay sau thẻ đóng iframe và nó thêm vào thẻ allowTransparency bắt buộc cho các trình duyệt trước IE9. Vì nó nằm trong câu lệnh điều kiện của IE, nó không được đọc bởi trình xác nhận W3C. Nó cũng giúp loại bỏ khả năng tương thích giữa trình duyệt chéo và các vấn đề ẩn nội dung bằng cách thêm tất cả CSS mà mọi người đã đề cập, nếu bạn đang sử dụng phiên bản jQuery mới nhất. Thuộc tính allowTransparency được tạo với mục đích được xác định rõ ràng, do đó, không có điểm cố gắng tạo lại nó bằng CSS khi bạn chỉ có thể chèn âm thanh đó một cách im lặng. Hy vọng điều này sẽ giúp ai đó!
(phương pháp này giả định bạn đã có iframe {background-color:transparent} mà không hoạt động trên các phiên bản IE cũ)
+1 để thực sự cố gắng cung cấp một cách thay thế, được yêu cầu. Tôi đã không thực sự thử nó mặc dù. –
Không cần phải liên quan đến jQuery ở đây. Điều này đủ: document.getElementById ("yourframeid"). AllowTransparency = true; – tomg
Để tự báo giá "** nếu ** bạn đã cài đặt". Tôi đã không nói rằng bạn phải cài đặt nó chỉ để làm điều này. Nếu bạn không, thì tôi đồng ý theo cách của bạn sẽ tốt hơn. –
Thuộc tính này có thể không được sử dụng rộng rãi như bạn nghĩ, bạn có thấy liệu nó có thực sự thay đổi hành vi trên các trình duyệt khác rồi IE không? Theo tôi có thể nói đây là thuộc tính cụ thể của IE và các trình duyệt khác mặc định cho phép minh bạch trên iframe và chỉ bỏ qua thuộc tính này. –
Đọc lại câu trả lời của tôi. Câu trả lời cho câu hỏi của bạn đã có. –
@ james.garriss Tôi đã đọc câu trả lời của bạn và bạn đặc biệt viết rằng tất cả các trình duyệt đều hỗ trợ thuộc tính chứ không phải chức năng của nó. Các trình duyệt Internet Explorer không hoạt động giống như Internet Explorer (8 và dưới, rõ ràng) hoạt động (khi thuộc tính được đặt cho nó) ngay cả khi thuộc tính không được đặt cho chúng. Chrome dường như không hỗ trợ thuộc tính DOM. Chính xác những gì bạn nghĩ nó hỗ trợ? – PhistucK