View Full Version : Giúp giùm về transparent trong IE
Mình đang làm 1 website cho khách hàng... Người ta yêu cầu background là 1 hình lớn. Các table thì có background transparent khoảng 70% để có thể thấy được hình background phía sau. Các table đó mình làm bằng DIV cho nó nên tất cả thông số đều đặt trong CSS.
Vấn đề là bên FireFox, Safari chạy okie... Còn bên IE thì kô hiểu. Mình kô thể dùng JavaScript để fix cho nó được vì JS chỉ fix được cho các file PNG trong file HTML mà thôi. File transparent đó lại nằm trong phần CSS mới khổ... Đã tìm ra cách fix cho nó bằng cách chèn 2 đoạn CLASS khác nhau để fix với IE và FireFox trong CSS. Lúc này thì okie...
Nhưng lại nảy sinh 1 vấn đề khác là sau khi okie phần Transparent cho IE thì tất cả các link nằm trong cái DIV có chứa cái background đó đều kô thể chạy được...
Mình đang đau đầu về chuyện này... Các anh em trong đây có ai hiểu nguyên do vì sao và cách fix thế nào thì chỉ giáo cho mình biết với
Mình post luôn cái CLASS để fix lỗi trong IE và FireFox để cho anh em tham khảo luôn nhé!
////////// Fix cho IE ////////////////
.bg_module1 {
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader(enabled=true, sizingMethod=scale src='images/trans_bg_1.png') left;
padding: 10px;
width: 544px;
}
////////// Fix cho FF ////////////////
.bg_module1[class] {
background: url(../images/trans_bg_1.png) bottom left no-repeat;
padding: 10px;
}
Link tham khảo trên Net: http://www.server.com.vn/inbound_asia/
Chuyển sang GIF cho nhanh ^^
Chuyển sang GIF thì kô đẹp... Khách hàng ngta muốn vậy mà... Với lại dùng GÌ thì các góc bo tròn của nó sẽ kô smooth, hix!
Hồi trước tui cũng theo thảm với thằng IE 6 vì PNG transparent, đây là các nè bạn, rất triệt để http://homepage.ntlworld.com/bobosola/index.htm
Hồi trước tui cũng theo thảm với thằng IE 6 vì PNG transparent, đây là các nè bạn, rất triệt để http://homepage.ntlworld.com/bobosola/index.htm
Cái này khỏi cần nói rùi... Mình cũng đã nói bên trên, là chỉ fix được cho file PNG trong file HTML mà thui... Còn nếu file PNG đó được gọi từ CSS thì làm thế nào? Hehehehe...
Trời đất, nếu vậy thì cậu có đọc các giải pháp khác ở cuối không ? Có một cái "...only CSS..." đó, thiệt tình
Trời đất, nếu vậy thì cậu có đọc các giải pháp khác ở cuối không ? Có một cái "...only CSS..." đó, thiệt tình
Xin thưa với bạn là mình đã áp dụng cái mà bạn nói ở bài viết trên cùng. Nhưng vấn đề của mình bây giờ kô còn là kô fix được lỗi PNG cho background ở IE nữa. Mà là những DIV nào có chèn cái class để fix đó vào thì tất cả các link đặt trong nó đều kô chạy bên IE bạn ơi...
Thank đã giúp đỡ nha! Bạn có giải pháp nào cho vấn đề của mình kô? Hix!
Đã fix xong cái dzụ link... Giờ tiếp tục đến dzụ Form và link popup! Hix
trungbom
04-03-2008, 02:14
vu link fix ntn the' ha? ban. oi. way lai. chi? dum` cai' coi
http://www.remotesynthesis.com/blog/index.cfm/2006/4/27/IE-PNG-Fix-with-Background-Support
hoặc:
http://www.hrunting.org/csstests/iealpha.html
trungbom
04-03-2008, 14:28
minh` lam` theo mai~ ko duoc. PNG transparent roi` nhung link nam` trong bg PNG ay' lai. hong? het' Link
minh` lam` theo mai~ ko duoc. PNG transparent roi` nhung link nam` trong bg PNG ay' lai. hong? het' Link
Dùng mẹo đi bạn :) 1 cái background và 1 cái khác nằm bên trong chứa link ngang hàng đè lên là dc, cụ thể có thể sử dụng z-index và position :).
Còn nếu ko bạn phải sửa bên trong file js, mình cũng ko rành file js lắm và solution mà tụi nó đưa ra cũng khá là phức tạp thành ra mình cũng ko giúp gì dc cho bạn. Mình cũng bị ở text-area và 1 số link, nhưng mình xài thêm 1 div khác nữa :)
Hoặc bạn chịu khó chia ra làm 3, phần nào cần đến trans thì tách hình nó ra :)
{cssyeah:com}
09-04-2008, 21:58
Bạn hãy vào cssyeah.com trong đó có một bài hướng dẫn rất chi tiết làm ảnh PNG transparent trong IE nhe'.
Chúc bạn thành công
Bạn hãy vào cssyeah.com trong đó có một bài hướng dẫn rất chi tiết làm ảnh PNG transparent trong IE nhe'.
Chúc bạn thành công
Vấn đề là text-area & link chứ ko phải PNG transparent. :emlaugh:
darkera13
12-04-2008, 09:41
Vấn đề sẽ được giải quyết nếu thêm 1 thằng div nữa nằm bên trên thằng chứa background (cho thằng chứa background ở một mình).
Vấn đề sẽ được giải quyết nếu thêm 1 thằng div nữa nằm bên trên thằng chứa background (cho thằng chứa background ở một mình).
Vậy bác sẽ làm gì khi cái hình đó là dùng cho thẻ <li> ?
duongtunglam
08-09-2008, 16:33
Dễ ợt, mẹo để link chạy tốt trên background PNG nè: khi cắt hình PNG, để kích thước chiều cao hoặc chiều rộng càng nhỏ càng tốt. Ví dụ các kích thước nhé:
w=1px h=1px
w=100px h=1px
w=1px h=100px
Dễ ợt, mẹo để link chạy tốt trên background PNG nè: khi cắt hình PNG, để kích thước chiều cao hoặc chiều rộng càng nhỏ càng tốt. Ví dụ các kích thước nhé:
w=1px h=1px
w=100px h=1px
w=1px h=100px
Mẹo của bạn quả lạ thật! Như vậy có khác gì với không dùng PNG nữa? Bạn cho xin link tham khảo được không?
Không hiểu Ngài Bill dạo này có còn chỉ đạo M$ nữa không, IE7> có còn bị lỗi này? Mà sao còn nhiều người dùng IE thế nhi!
duongtunglam
12-09-2008, 08:36
Mẹo của bạn quả lạ thật! Như vậy có khác gì với không dùng PNG nữa? Bạn cho xin link tham khảo được không?
Không hiểu Ngài Bill dạo này có còn chỉ đạo M$ nữa không, IE7> có còn bị lỗi này? Mà sao còn nhiều người dùng IE thế nhi!
Các dự án của Sony Vaio bên Nhật tui đều dùng cách này cả. Vẫn là hình PNG, sao lại nói "khác gì không dùng PNG"??? Kích thước file background chiều rộng hoặc chiều cao tuy nhỏ nhưng nó repeat lại mà, cố sao đâu? File hình tuy bé thật nhưng vẫn là hình PNG 24bit, trong suốt đấy! So với cách dùng 2 div thì cái này chẳng tốt và gọn gàng hơn sao?
Nếu cảm thấy cách của mình ko hay, bạn có thể vò đầu bứt tai tìm cách khác vậy. Mình chia sẻ kinh nghiệm thôi, ai muốn thử thì làm thử sẽ biết, chưa thử qua thì đừng nhận xét theo cảm tính như vậy.
PNG còn nhiều vấn đề lắm. Giả sử có 1 class thế này nhé:
.main_navi {
FILTER:progid: DXImageTransform.Microsoft.AlphaImageLoader(enable d='true',sizingMethod='scale',src='navi_bg.png');
}
nếu bên FF thì class này ko hiện background vì FF ko hiểu FILTER. Bạn sẽ làm thế nào? thêm thuộc tính background-image vào class trên nhé, FF hiển thị tốt thì bên IE sẽ bị 2 lần background đó (tức là giống như 2 lớp background chồng lên nhau, độ trong suốt sẽ bị giảm dần). Nếu bạn ko dùng javascript, có cách nào để viết CSS cùng 1 class có thể chạy trên IE6, IE7 & FF khác nhau ko? Hehehe, mọi thứ đơn giản hơn bạn tưởng đó.
IE7 hỗ trợ PNG lâu rồi bạn, MS đã fix. Theo ý kiến nhiều người thì IE được nhiều người thích là vì nó hiển thị text trên màn hình LCD đẹp hơn Firefox, một số trang web không hiển thị tốt trên FF. Ngược lại bên IE cũng có nhiều cái ko bằng bên FF. Nói chung là 50/50 chứ không thể nào bỏ hẳn IE, bạn đừng thành kiến với IE quá.
Các dự án của Sony Vaio bên Nhật tui đều dùng cách này cả. Vẫn là hình PNG, sao lại nói "khác gì không dùng PNG"??? Kích thước file background chiều rộng hoặc chiều cao tuy nhỏ nhưng nó repeat lại mà, cố sao đâu? File hình tuy bé thật nhưng vẫn là hình PNG 24bit, trong suốt đấy! So với cách dùng 2 div thì cái này chẳng tốt và gọn gàng hơn sao?
Bọn mình không hiểu ý của nhau:
Dùng cách repeat sẽ tạo ra một background có dạng pattern. Trường hợp của bạn có áp dụng được nếu background là 1 bức tranh như bạn chủ topic nêu vấn đề?
D01 là nền. Bạn chủ topic còn muốn hình nền trong thẻ div có những chỗ trong suốt, không che đi hình nền chính. Vậy nếu cắt nhỏ và repeat thì nội dung của bức hình (ví dụ như hình cô gái chẳng hạn) có còn không, các mảNH nhỏ sau khi cắt có ghép lại được?
THay vì PNG-24, mình đã thử lưu = PNG-8 và hiển thị tốt cả trên IE6.
Bạn có link để mình tham khảo cách của bạn?
duongtunglam
12-09-2008, 22:02
Bọn mình không hiểu ý của nhau:
Dùng cách repeat sẽ tạo ra một background có dạng pattern. Trường hợp của bạn có áp dụng được nếu background là 1 bức tranh như bạn chủ topic nêu vấn đề?
D01 là nền. Bạn chủ topic còn muốn hình nền trong thẻ div có những chỗ trong suốt, không che đi hình nền chính. Vậy nếu cắt nhỏ và repeat thì nội dung của bức hình (ví dụ như hình cô gái chẳng hạn) có còn không, các mảNH nhỏ sau khi cắt có ghép lại được?
THay vì PNG-24, mình đã thử lưu = PNG-8 và hiển thị tốt cả trên IE6.
Bạn có link để mình tham khảo cách của bạn?
Thực sự, nếu bg là PNG hình to, thì cách mình ko xài được. Tuy nhiên, nếu vậy thì đi ngược logic. Ví dụ bạn nói hình cô gái, thông thường tấm hình đó sẻ là hình nằm dưới, bên trên sẽ là 1 div trong suốt để thấy hình cô gái mờ mờ phía sau, bên trên là nội dung HTML gì đó, có thể là text, link, v.v... hiệu ứng trong suốt sẽ ấn tượng ngay.
Còn nếu hình cô gái làm bg cho table bên trên, bên dưới là 1 tấm hình khác, phong cảnh chẳng hạn, nếu để hình cô gái trong suốt thì ko còn ý nghĩa lắm, vì nhiều chi tiết của hình cô gái sẽ bị lẫn với hình phong cảnh phía sau.
Vì ngược logic như vậy nên ít có giải pháp cho trường hợp này.
Bạn nên xem kỹ lại vấn đề bạn chủ topic nói:
"Người ta yêu cầu background là 1 hình lớn. Các table thì có background transparent khoảng 70% để có thể thấy được hình background phía sau."
Như vậy là hình background to, nằm dưới, table nằm bên trên có nền PNG trong suốt so với bên dưới. Mình tin chắc nền PNG này chỉ là solid mà thôi. Có thể cắt 1x1 hoặc chỉ width 1px hay chỉ height 1px là giải quyết được vấn đề link.
PNG mình đụng nhiều trong dự án Sony Vaio hàng năm (năm nào cũng có đợt sản phẩm mới, cần làm website thay thế năm trước), nhưng code nó liên quan nhiều vấn đề, show ra đây nhìn rối lắm, các bạn khác xem khó hiểu. Mình làm 1 cai demo đơn giản để mọi người xem dễ hình dung hơn: http://duongtunglam.com/demoPNG/demo.html
Mình có 1 vấn đề mong được chỉ giáo: Firefox không hiểu margin-top và bottom?? trong demo của mình, nếu xem bên FF sẽ thấy cái div nội dung, tuy có set margin:25px trong class "content" nhưng chỉ có margin left và right là có tác dụng thôi.
Thực sự, nếu bg là PNG hình to, thì cách mình ko xài được. Tuy nhiên, nếu vậy thì đi ngược logic. Ví dụ bạn nói hình cô gái, thông thường tấm hình đó sẻ là hình nằm dưới, bên trên sẽ là 1 div trong suốt để thấy hình cô gái mờ mờ phía sau, bên trên là nội dung HTML gì đó, có thể là text, link, v.v... hiệu ứng trong suốt sẽ ấn tượng ngay.
Còn nếu hình cô gái làm bg cho table bên trên, bên dưới là 1 tấm hình khác, phong cảnh chẳng hạn, nếu để hình cô gái trong suốt thì ko còn ý nghĩa lắm, vì nhiều chi tiết của hình cô gái sẽ bị lẫn với hình phong cảnh phía sau.
Vì ngược logic như vậy nên ít có giải pháp cho trường hợp này.
Bạn nên xem kỹ lại vấn đề bạn chủ topic nói:
"Người ta yêu cầu background là 1 hình lớn. Các table thì có background transparent khoảng 70% để có thể thấy được hình background phía sau."
Như vậy là hình background to, nằm dưới, table nằm bên trên có nền PNG trong suốt so với bên dưới. Mình tin chắc nền PNG này chỉ là solid mà thôi. Có thể cắt 1x1 hoặc chỉ width 1px hay chỉ height 1px là giải quyết được vấn đề link.
PNG mình đụng nhiều trong dự án Sony Vaio hàng năm (năm nào cũng có đợt sản phẩm mới, cần làm website thay thế năm trước), nhưng code nó liên quan nhiều vấn đề, show ra đây nhìn rối lắm, các bạn khác xem khó hiểu. Mình làm 1 cai demo đơn giản để mọi người xem dễ hình dung hơn: http://duongtunglam.com/demoPNG/demo.html
Mình có 1 vấn đề mong được chỉ giáo: Firefox không hiểu margin-top và bottom?? trong demo của mình, nếu xem bên FF sẽ thấy cái div nội dung, tuy có set margin:25px trong class "content" nhưng chỉ có margin left và right là có tác dụng thôi.
Cám ơn bạn. Bây giờ thì mình đã hiểu.
Vụ margin hình như là như thế nên mình thường phải dùng padding để thay thế.
Đối với hình thì mình dùng position.:)
[=========> Bổ sung bài viết <=========]
PNG mình đụng nhiều trong dự án Sony Vaio hàng năm (năm nào cũng có đợt sản phẩm mới, cần làm website thay thế năm trước), nhưng code nó liên quan nhiều vấn đề, show ra đây nhìn rối lắm, các bạn khác xem khó hiểu. Mình làm 1 cai demo đơn giản để mọi người xem dễ hình dung hơn: http://duongtunglam.com/demoPNG/demo.html
Mới xem link bạn gửi = IE6, khác với FF, hình background hiện lên đủ mọi chi tiết, không hề bị mờ đi tí nào.
Như vậy thủ thuật này không phát huy tác dụng khi gặp IE6?
Powered by vBulletin® Version 4.2.0 Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.