Текст плохо читается на разных фонах изображений

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

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

стандартный

Поскольку я работаю с CSS, я пробовал разные варианты, такие как:

Добавление текстовых теней:

с тенью текста

CSS:

text-shadow: 3px 3px 0px #000;

Также попробовал, создав полупрозрачную рамку вокруг текста:

с полупрозрачным фоном

Демо

Я чувствую, что коробка выглядит неуместно.

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

PS: Вы также можете посоветовать использовать другой шрифт, если это поможет ему лучше выделиться.

Мягкого черного внешнего свечения на вашем тексте (тени во всех направлениях) иногда может быть достаточно, чтобы сделать его более контрастным, не создавая впечатления, будто вы что-то подложили под него.
@John Я тоже думал о свечении, но без большого эффекта свечения проблема с нечитаемым текстом остается, и, поскольку я работаю над корпоративным веб-сайтом, я решил вычеркнуть его, так как это выглядело бы непрофессионально. Спасибо за предложение!
Нужно было подчеркнуть, насколько тонко я говорил. Типа 20-30% и широкий разброс, где вы вряд ли это заметите. Если это выглядит как свечение или виден переход — это слишком темно. Используйте ровно столько, сколько нужно, чтобы изображение вокруг него стало чуть более темным в том месте, где оно соединяется с надписью.
@John Хмм звучит интересно, я тоже попробую.

Ответы (3)

В качестве альтернативы уже замечательным ответам, как насчет добавления черного div с непрозрачностью 50% за текстом?

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

Это позволит шрифту работать практически с любым изображением.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

ПРИМЕР

@ICanHasCheezburger Нет проблем! Я часто сталкиваюсь с одной и той же проблемой при работе с веб-сайтами, например, с изображениями баннеров, и я обнаружил, что это самый приятный на вид способ обойти ее, поскольку в большинстве случаев он работает хорошо.

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

Пример 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

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

Пример 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Спасибо за ваше время! Я планировал использовать text-shadowпредоставленное вами вместе с решением SaturnsEye.
@Ican Я не сделал коробку, потому что ты сказал этого не делать. «Также пытался создать полупрозрачную рамку вокруг текста. Я чувствую, что рамка выглядит неуместно». Но ваш сайт, ваш звонок...
Это правда, но, увидев решение SaturnsEye, я понял, что оно выглядит хорошо, когда размер и цвет изменены. Извините за неправильный выбор слов. Может, в следующий раз мне лучше объяснить.

Дайте ему черный прозрачный фон и немного отступов.

цвет фона: rgba (0,0,0,0,5);

набивка: 0,5 см;

Просто поиграйтесь с этими числами, но это должно дать вам полезный результат.

Спасибо за ваше время! Я понял, что если у вас есть случай, когда внутренний элемент должен иметь другую непрозрачность по сравнению с внешним, opacityсвойство в этом случае не поможет, тогда как установка непрозрачности в background-colorсвойстве делает работу. Как здесь
Текст плохо читается на разных фонах изображений
СпросиСетьПолитика конфиденциальности1y, 0v