Почему вместе с фоновыми фотографиями затемняется и текст?
<section class="slider"> <div class="slider__div"> <div class="slider__section" style="background-image: url(Images/1вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title">ДИЗАЙН И СТРОИТЕЛЬСТВО</h2> <p class="slider__text"> Совокупность зданий и сооружений, создающих пространственную среду для жизни и деятельности человека </p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/2вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title">СТРОИТЕЛЬСТВО И РЕМОНТ</h2> <p class="slider__text"> Процесс их изменения, восстановления, улучшения, доведения до первоначальных характеристик </p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/3вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title">ОТДЕЛКА ИНТЕРЬЕРОВ</h2> <p class="slider__text"> Оформление поверхностей стен, установку напольного покрытия, украшение помещения мебельным гарнитуром </p> </div> </div> </div> </div> </section> Развернуть фрагмент |
<section class="slider"> <div class="slider__div"> <div class="slider__section" style="background-image: url(Images/1вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title">ДИЗАЙН И СТРОИТЕЛЬСТВО</h2> <p class="slider__text"> Совокупность зданий и сооружений, создающих пространственную среду для жизни и деятельности человека </p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/2вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title">СТРОИТЕЛЬСТВО И РЕМОНТ</h2> <p class="slider__text"> Процесс их изменения, восстановления, улучшения, доведения до первоначальных характеристик </p> </div> </div> </div> <div class="slider__section" style="background-image: url(Images/3вариант.jpg)" > <div class="container"> <div class="slider__"> <h2 class="slider__title">ОТДЕЛКА ИНТЕРЬЕРОВ</h2> <p class="slider__text"> Оформление поверхностей стен, установку напольного покрытия, украшение помещения мебельным гарнитуром </p> </div> </div> </div> </div> </section> Развернуть фрагмент
.slider__div { display: flex; height: 660px; align-items: center; justify-content: space-between; } .slider__section { width: 33%; height: 460px; position: relative; display: flex; flex-direction: column; justify-content: center; background-size: cover; /*justify-content: space-between;*/ margin-left: 0; } .slider__section::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .slider__ { display: flex; flex-direction: column; padding: 0 30px; } .slider__title { font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; } .slider__text { color: #fff; margin-top: 15px; font-size: 16px; } |
.slider__div { display: flex; height: 660px; align-items: center; justify-content: space-between; } .slider__section { width: 33%; height: 460px; position: relative; display: flex; flex-direction: column; justify-content: center; background-size: cover; /*justify-content: space-between;*/ margin-left: 0; } .slider__section::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .slider__ { display: flex; flex-direction: column; padding: 0 30px; } .slider__title { font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; } .slider__text { color: #fff; margin-top: 15px; font-size: 16px; }
Дополнительно:
.slider__section { z-index: 1 } .slider__section::after { z-index: -1 } |
.slider__section { z-index: 1 } .slider__section::after { z-index: -1 }
- Спасибо большое помогли)
Разобраться только не могу почему нельзя просто так сделать
.slider__section::after { z-index: -1 } - Danil2134, можно, но у меня иногда просто проваливалось куда ниже, чем требовалось, поэтому вошло в привычку. Чтобы дальше этого блока оно не упало))
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с CSS-свойством background-blend-mode, которое применяется к фоновым изображениям. Когда вы применяете этот свойство к элементу, содержащему текст, текст также может быть затемнен из-за наложения эффекта смешивания цветов.
Это происходит потому, что свойство background-blend-mode применяет алгоритм смешивания цветов к заднему фону элемента и цвету текста. По умолчанию, режим смешивания устанавливается в значения normal или normal-burn, которые могут привести к затемнению текста.
Для решения этой проблемы вам следует изменить значение свойства background-blend-mode на другое значение, которое не будет влиять на текст. Например, вы можете установить значение свойства background-blend-mode в none или initial, чтобы отключить эффект смешивания цветов для фонового изображения.
Пример кода на CSS:
.element { background-image: url('your-image.jpg'); background-blend-mode: none; /* Или другое значение */ }
Попробуйте изменить значение свойства background-blend-mode на none и проверьте, не затемнился ли текст на вашем сайте. Если проблема сохраняется, возможно, ее причина кроется в других стилях CSS, влияющих на текст или фоновые изображения. В таком случае, вам придется проанализировать их и внести соответствующие изменения.