Изображение фонового изображения CSS делает темнее

У меня есть следующее: www.thewhozoo.com

Как вы можете видеть, у него есть фоновое изображение.

.top-container { float: left; width: 100%; background: url('../images/background1.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

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

Я добавил text-shadow к тексту, что помогло значительно подчеркнуть текст.

 .text-description-header { font-size: 250%; color: white; text-shadow: 0px 1px 14px rgba(0,0,0,1.0); }

Тем не менее, я бы хотел, чтобы текст выделялся еще больше.

Вопрос

Есть ли предложения, как я могу сделать text-shadow еще более темной?
Или сделать фоновое изображение немного темнее?

благодаря

Я бы пошел на фотошоп, чтобы размыть фон или дать ему оверлей. Однако вы можете попробовать дать ему линейный gradleиент в вашем classе top-container прежде чем URL-адрес вызовет фоновое изображение так:

 background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../images/background1.jpg) no-repeat center center fixed;

просто измените значение rgba на то, что вам нужно. Надеюсь это поможет.

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

Вы можете складывать несколько теней текста , чтобы сделать его темнее.

 text-shadow: 0px 0px 10px black, 0px 0px 10px black;

Вы можете использовать ниже css для получения того же

 .top-container { position:relative; } .top-container::before { content:''; background:rgba(0,0,0,0.5); width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:-1; } направо .top-container { position:relative; } .top-container::before { content:''; background:rgba(0,0,0,0.5); width:100%; height:100%; position:absolute; left:0px; top:0px; z-index:-1; }