Jump to content
  • 0

Проблема с PNG

VJiK

Asked by VJiK,

 Share

Question

VJiK Explorer

VJiK

Posted
Posted

Доброго времени суток!

Хотелось бы понять почему происходит следующий баг.

Имеем PNG-картинку с градиентом от #ccc до полной прозрачности:

gradient.png

Теперь берем эту картинку и накладываем поверх фона с цветом #ccc. Код страницы такой:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
	<div style="background: #ccc url(gradient.png) no-repeat 0 0; width: 200px; height: 200px;"></div>
</body>
</html>

Получаем вот такую картину:

gradient_bg_browser.png

Если присмотреться (или воспользоваться color picker'ом ;) ), то у нас получилась картинка в полосочку с цветами #ccc и #cbcbcb, а должен быть равномерно один цвет #ccc.

Если же взять эту картинку и наложить на такой же фон в фотошопе, то всё как надо:

gradient_bg_photoshop.png

Такое поведение наблюдается на серых цветах, если же взять белый или красный, то всё нормально. Собственно почему так происходит?

PS Во всех браузерах одинаково проявляется этот глюк (FF3, IE7, IE8, Opera 10, Safari 5, Chrome 5)

PPS Этот трюк используется для плавного скрытия текста.

Link to comment
Share on other sites

29 answers to this question

Recommended Posts

  • 0
swetlana Explorer

swetlana

Posted
Posted

Вот код:

<!DOCTYPE html>
<html>
<head>
	<title>проверим-ка</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style>
	body {
		width: 200px;
		height: 400px;
		background: #ccc;
	}
	div {
		width: 200px;
		height: 200px;
		background: transparent url(gradient.png) no-repeat;
	}
	div, img {
		border: 1px solid #060;
	}
	</style>
</head>

<body>
	<div>?</div>
	<img src="gradient.png" />
</body>
</html>

Вот файл с градиентом:

http://slil.ru/29558171

Вот что получилось:

d2b9ede88d76t.jpg

По крайней мере я у себя вожу колорпикером по результату — в пределах рамок всё одного цвета.

Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted

VJiK, да, я уже попробовала на Windows XP, Windows 7 и Debian в разных браузерах.

К сожалению, в Windows обеих версий в любом браузере действительно такая проблема есть ;)

В линуксе нет проблемы, и тоже в любом браузере.

Впервые, кстати, вижу такое (ну если шрифты не считать): проблема локализуется в семействе ОС, а не в браузере.

Тады не знаю ничего, извините.

Link to comment
Share on other sites
  • 0
VJiK Explorer

VJiK

Posted
  • Author
Posted (edited)

Значит проблема наблюдается только в windows... интересно всё таки добраться до сути))

Почему так-то? Что использует браузер (любой в системе причем) для генерации картинок?

PS Выложил тестовую страницу

Edited by VJiK
Link to comment
Share on other sites
  • 0
swetlana Explorer

swetlana

Posted
Posted (edited)

Safari 5.0.1 (Mac OS X 10.6.4)

819dd3c8dfdbt.jpg

Opera 10.60 (Mac OS X 10.6.4)

00671eb7f716t.jpg

Firefox 3.6.8 (Mac OS X 10.6.4)

bd6669f8e0aft.jpg

А теперь давайте дружно удивляться!

e309daf5cfb0t.jpg

Это Internet Explorer:Mac 5.2, Последняя версия експлорера под мак, датированная 2001 годом. Не удивлюсь, если реально им не пользуется уже никто во всём мире. (Хотя, если совсем уж честно, у меня лично есть ноутбук производства 1999 года, на котором именно это чудо стоит основным браузером).

Ни для кого из здесь присутствующих не секрет, что IE даже версии 6 в принципе не умеет отображать прозрачность png.

Это что получается — глюк глюканул?

Мне стало интересно, и я провожу ещё один эксперимент: в своём примере меняю цвет фона body на синий (чтоб видно было), и смотрю в IE:Mac 5.2.

И вот:

d7db09783193t.jpg

Этот браузер настолько безнадёжен, что не умеет отображать текст в utf-8 и фоновые картинки, однако прозрачность в png Internet Explorer пятой версии исполнил на пять баллов!

Что это? Не подтверждение ли предположения, что корень данной проблемы кроется не в браузерах, а в ОСях?

Firefox 3.6.8 на Windows XP действительно показал полосы #ccc и #cbcbcb:

b9470fbdecadt.jpg

Но IE6 на той же Windows XP его переплюнул и показал широкую гамму оттенков серого:

fee1a2b58159t.jpg

Epiphany 2.22.3 на Debian 5.0.5 (всё красиво):

6a4ad3dd89dbt.jpg

Konqueror 3.5.9 на Debian 5.0.5 (всё красиво):

eaa6a91ab77dt.jpg

IE8 в Windows 7(всё те же полосы):

93d16ad1175ft.jpg

А вот Chrome 5 в Windows 7 на этой странице отжёг.

Видимо всё потому что язык этой страницы английский. А вот если перевести…

Edited by swetlana
Link to comment
Share on other sites
  • 0
VJiK Explorer

VJiK

Posted
  • Author
Posted

На этой картинке показаны наложения в разных браузерах: striped.png.

На одной и той же системе, но в разных браузерах - по разному глючит... может и в браузере дело...

swetlana, сделайте пожалуйста скриншоты в маке и линуксе этой странички: http://pepelsbey.net/pro/2010/08/color-blending/

У автора на маке тоже глючит.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
Great Rash, а ты пипеткой поводи по картинками и всё заметишь

Какой еще пипеткой? Я в браузере смотрю, а не в фотошопе. Что-то не понятно где у вас проблема? Все однородно, зачем там вообще png если каждый квадрат тупо залит одним цветом?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept