-
Код:
<html>
<head>
<style>
.tmp {
background-color: transparent;
background-image: url(test.png);
background-position: center;
background-repeat: no-repeat;
//background-image: none ! important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=test.png,sizingMethod=crop);
}
</style>
</head>
<body style="background-color: #cccccc; color: #ffffff;">
<table border="1" width="100" height="100">
<tr><td class="tmp">Картинка PNG на бэкграунде</td></tr>
<tr><td style="background-color: #565656;">эталон цвета *#565656 на бэкграунде</td></tr>
</table>
</body>
</html>
Картинка test.png тут:
[Only registered and activated users can see links. Click Here To Register...]
Итого, если открыть страницу в IE, то непрозрачная область в test.png будет НЕ #565656 , как предполагалось, а #4a4a4a. В мозилле получается #555555. Почему так ? как добится цвета #565656 ? может я сохраняю как-то криво картинку test.png (так как цвет меняется не только в ie т.е. дело вроде как не мелкомягких фильтрах) ?
-
Лучше будет сделать так:
Внутрь тэга head вставить:
Код:
<!--[if gte IE 5.5000]>
<script type=text/javascript src=png.js></script>
<![endif]-->
Содержание png.js такое:
Код:
function correctPNG()
* {
* for(var i=0; i<document.images.length; i++)
* * *{
* var img = document.images[i]
* var imgName = img.src.toUpperCase()
* if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
* * *{
* var imgID = (img.id) ? "id='" + img.id + "' " : ""
* var imgClass = (img.className) ? "class='" + img.className + "' " : ""
* var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
* var imgStyle = "display:inline-block;" + img.style.cssText
* if (img.align == "left") imgStyle = "float:left;" + imgStyle
* if (img.align == "right") imgStyle = "float:right;" + imgStyle
* if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle *
* var strNewHTML = " * + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
* * *+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
* + "(src=\'" + img.src + "\', sizingMethod='scale');\">"
* img.outerHTML = strNewHTML
* i = i-1
* * *}
* * *}
* }
window.attachEvent("onload", correctPNG);
-
Severe, это слегка не то... это все способы реализации кроссбраузерностидабы заставить их обрабатывать пнг-24. Но проблема в выводимых цветах.
проблема до сих пор актуальна.... ну попробуйте хоть так сделать. А то не пойму у меня ли это только, может я что-то не так творю.. какю-то детать пропустил.
Для проверки нужно:
1. Создать прозрачный "проект"в фотошопе. File -> New. Background-contents выстаить в transparent. размер, допустим 100х100.
2. Залить всю область цветом #666666
3. edit in image ready (ctrl+shift+m)
4. в окне Optimize (если нет, то window -> optimize) выставить format = PNG-24
5. Save optimized as , сохраняете как test.png
6. исопльзуте код из первого поста моего здесь и сохраните в test.html , допустим. Изменить в нем только #565656 на #666666
7. Открываете этот html браузером Internet Explorer
8. И уже на глаз будет заметна слегка разница между цветом эталона и test.png
9. для того, что бы удоствовериться.... делаете скриншот, вставляете в фотошоп и пипеткой смотрите цвет эталона и ячейки с test.png. В ячейки с тест.пнг будет цвет #5a5a5a. При использовании пипетки галочку safety pallete не забудьте снять
-
Кажись ответ найден:
[Only registered and activated users can see links. Click Here To Register...]
в конце топика
