Выравнивание прозрачного PNG на фоне того же цвета CSS

Question

Моя идея заключается в том, что PNG, накладывающийся на некоторый текст, с прозрачностью от 0% до 100%, все цвета того же цвета, что и фон CSS, уменьшат текст, лежащий в основе Это.

Оказывается, прозрачный PNG видимый также в областях, где он должен быть прозрачным. Кроме того, цвета PNG и CSS не совпадают - хотя я создаю их с одинаковыми шестнадцатеричными значениями.

Изображение включено. Я попытался создать ресурс в Illustrator, Photoshop и Fireworks. Я попытался удалить гамма-информацию (gAMA) с помощью pngcrush, PNGSquash и ImageMagick. Проблема такая же в Firefox, как и в Safari.

Если кто-нибудь знает, как это решить - или, если это вообще возможно, я бы хотел его услышать! Заранее спасибо.

Answer 1

Я не могу сразу решить проблему с которой вы столкнулись, но я могу предложить альтернативный текст выцветания решения, если это какое-либо использование?

.text-to-fade {color: rgba(255,255,255,0.0) /* red: 255, green: 255, blue: 255, alpha: 0 */ 
       } 

значение 0.0 в конце концов, это альфа-значение, и может варьироваться от 0 до 1, с 0 быть непрозрачной и 1 быть прозрачным. rgba имеет проблемы с браузерами, отличными от Firefox, насколько я экспериментировал.

возможно

.text-to-fade {opacity: 0.5; /* for most browsers */ 
       filter: alpha(opacity=50); /* for IE */ 
       } 

Answer 2

Причина, по-видимому, другой цвет, потому что он прозрачен, не потому, что цвета на самом деле разные. Чтобы продемонстрировать это, откройте редактор изображений, который поддерживает слои. Создайте белый нижний слой и черный верхний слой. Установите непрозрачность черного слоя на 50% и объедините слои вниз. Используйте цветной выборщик, чтобы проверить цвет. Это будет # 808080, а не черный.

Причина, по которой это не затухание, заключается в том, что этот цвет является аддитивным. Скажите, что ваш текст тоже # 808080: в местах, где есть текст, вы накладываете # 808080 # 808080 - и это заканчивается чем-то вроде # 424242, а не отменяет, как вы хотите. Существует действительно отличный способ сделать то, что вы пытаетесь сделать в веб-браузере всего за один шаг.

Одна вещь, которую нужно сделать, - сделать текст невидимым (видимость: hidden;) с помощью javascript. Другим вариантом было бы использовать относительное или абсолютное позиционирование и установить Z-индексы, так все выглядит примерно так:

• 3: ПРОЗРАЧНЫЙ-СЕРЫЙ
• 2: кнопка/любые другие объекты
• 1: OPAQUE-СЕРЫЙ
• 0: текст

Это будет блокировать текст и оставить что-нибудь еще частично видимый.