Как выбрать цвет шрифта для очень загруженного фона? [дубликат]

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

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

Не могли бы вы посоветовать мне, какой цвет мне следует использовать?

введите описание изображения здесь

Спасибо

Я бы попробовал добавить тень или обводку к тексту, чтобы он выделялся. В качестве альтернативы используйте менее загруженный фон.

Ответы (1)

Трудно добиться идеального цвета и контраста, так как фон имеет почти все возможные цвета!

Но вы можете добавить к тексту некоторые эффекты, чтобы сделать его светлее или темнее, и таким образом поиграть с контрастом. Это также дает вам некоторую свободу в использовании другого акцентного цвета... Например. цвет логотипа компании, для которой создается сайт.

Вы не можете сделать все эти эффекты с помощью CSS, некоторые из них да. Я сделал это с помощью Photoshop и использовал стиль слоя (дважды щелкните слои с вашим текстом, чтобы увидеть их).

Вот пример с прозрачным белым полем:

Прозрачная коробка

Вот пример с прозрачным белым полем во всю ширину:

Прозрачная коробка во всю ширину

Вот пример с прозрачным черным ящиком во всю ширину:

Черный ящик во всю ширину

Вот пример с большой тенью и рамкой:

тень для текста

Вот пример со свечением и коробкой:

эффект внешнего свечения текста


Есть много вариантов таких проектов, но, возможно, эти примеры натолкнут вас на некоторые идеи!

Если вы хотите использовать только текст и ничего больше, вам следует выбрать самый жирный шрифт, который вы можете найти, и, если возможно, добавить черный контур или что-то вокруг него.

+1 - Контур, кстати, легко добавить в CSS с помощью text-shadow (вы можете использовать несколько жестких теней в одном объявлении свойства text-shadow). К сожалению, это оставляет старые версии Internet Explorer в стороне. Предлагаемая здесь панель — самое простое кросс-браузерное решение; альтернативой может быть использование условных комментариев для введения CSS для панели в IE9 и ниже.