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

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

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

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

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

градиент виден, хотя и прозрачен


colors css png transparency
person eferm    schedule 05.07.2009    source источник
comment
О, я хотел спросить в своем комментарии ниже, но не могли бы вы опубликовать свой код (xhtml/css) и, если возможно, ссылку на живую демонстрацию, которая показывает, что у вас есть?   -  person David says reinstate Monica    schedule 05.07.2009

Ответы (2)


arrow_upward
2
arrow_downward

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

.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 */
               }
person David says reinstate Monica    schedule 05.07.2009
comment
Спасибо, я не знал об этом CSS. Однако, если я правильно понимаю, это может создать эффект затухания текста только в том случае, если я применю его несколько раз с разными альфа-значениями к нижней части 3/4/5/? строки текста? То, что я пытаюсь решить, - это постепенное исчезновение текста без необходимости кодировать некоторую логику, которая подсчитывает строки, потому что количество строк может быть любым из-за динамического содержимого. - person eferm; 05.07.2009
comment
Не возникнет ли та же проблема, если вы используете .png, плавающий над этими строками? Я хотел бы изменить свой ответ и предложить решение JS/jQuery (которое необходимо для изменения значений CSS). Я постараюсь посмотреть, смогу ли я найти лучшее решение в соответствии с вашим запросом. - person David says reinstate Monica; 05.07.2009
comment
Буду очень рад любому предложению! Однако я не слишком хорошо знаком с JS/jQuery. Но это не повод не учиться :) - person eferm; 05.07.2009
comment
Ага, я тоже... Стараюсь, мозг почему-то болит... =) - person David says reinstate Monica; 05.07.2009
comment
Я только что увидел ваш другой комментарий. Вы можете просмотреть сайт в действии по адресу eferm.com, где используется формат PNG. Если вы что-то найдете, дайте мне знать! Я тоже буду продолжать пробовать себя. - person eferm; 05.07.2009

arrow_upward
2
arrow_downward

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

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

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

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

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

person Sam DeFabbia-Kane    schedule 05.07.2009
comment
А... как-то понимаю. Спасибо за описание! Однако, похоже, мне осталось реализовать код, который определяет, в какой строке находятся определенные слова в абзаце... Но это другая проблема. - person eferm; 05.07.2009