полупрозрачность, png

**Voyager2K** · 06.07.2006, 01:42

Код:

<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 тут:
[Только зарегистрированные пользователи могут видеть ссылки. ]

Итого, если открыть страницу в IE, то непрозрачная область в test.png будет НЕ #565656 , как предполагалось, а #4a4a4a. В мозилле получается #555555. Почему так ? как добится цвета #565656 ? может я сохраняю как-то криво картинку test.png (так как цвет меняется не только в ie т.е. дело вроде как не мелкомягких фильтрах) ?

**Severe** · 06.07.2006, 03:22

Лучше будет сделать так:
Внутрь тэга 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=&#39;" + img.id + "&#39; " : ""
 * var imgClass = (img.className) ? "class=&#39;" + img.className + "&#39; " : ""
 * var imgTitle = (img.title) ? "title=&#39;" + img.title + "&#39; " : "title=&#39;" + img.alt + "&#39; "
 * 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=\&#39;" + img.src + "\&#39;, sizingMethod=&#39;scale&#39;);\">" 
 * img.outerHTML = strNewHTML
 * i = i-1
 * * *}
 * * *}
 * }
window.attachEvent("onload", correctPNG);

**Voyager2K** · 21.07.2006, 17:04

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 не забудьте снять

**Voyager2K** · 21.07.2006, 18:31

Кажись ответ найден:
[Только зарегистрированные пользователи могут видеть ссылки. ]
в конце топика

Тема: полупрозрачность, png

Опции темы

Поиск по теме

Отображение

Похожие темы

полупрозрачность

Ваши права