0

Имеется следующий код блока:

<body>
  <div style="background: linear-gradient(110deg, rgb(66, 73, 81) 63%, transparent 63%), url(https://source.unsplash.com/random/860) right center / auto 100% no-repeat;">
    <div class="dark-slider__bg-block"></div>
    <div class="dark-slider__slide-content">
        <div class="dark-slider__wrapper">
            <h2 class="dark-slider__head">
                <div style="color: rgb(255, 255, 255);">
                    <div>
                        <div>
                            <div>
                                <div>
                                  <p>Экипировка Base</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </h2>
            <div class="dark-slider__text" style="color: rgb(255, 255, 255);">
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                  <p>В комплекте для горных лыж вы получите лыжи и ботинки Salomon или Atomic. В комплекте для сноуборда будут доски Burton Cruzer или Progression с новыми ботинками Burton.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="" class="dark-slider__button">Забронировать</a> 
            <a href="" class="dark-slider__link">Забронировать</a>
        </div>
    </div>
</div>
</body>

На широких экранах наблюдается следующая проблема с background: введите сюда описание изображения (тогда как картинка должна заполнить все пространство от правой границы градиента до правой границы блока).

Пробовал решить проблему при помощи background-size: cover, однако картинка слишком крупно масштабируется: введите сюда описание изображения

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

Как можно решить данную проблему? JSFiddle: https://jsfiddle.net/q1z96gs4

1 ответ 1

1

Блоку, которому были заданы два свойства фона, определим таким образом (background-size подогнать до необходимого значения):

.bg {
   background-image: url(https://bipbap.ru/wp-content/uploads/2017/08/2.jpg);
   background-position: 100% 50%;
   background-size: 54% 100%;
   background-repeat: no-repeat;
   position: relative;
}

.bg:before {
   content: '';
   background: linear-gradient(110deg, rgb(66, 73, 81) 63%, transparent 63%);
   position: absolute;
   width: 86%;
   height: 100%;
   z-index: 1;
}

Тексту зададим z-index

.dark-slider__slide-content {
   position: relative;
   z-index: 2;
}

Работающий пример: https://jsfiddle.net/o34yn8fa/19/

3
  • В целом работает, но есть две проблемы: 1) картинка сжимается без сохранения пропорций 2) все еще сохраняется проблема, обозначенная на первом скриншоте в вопросе dl4.joxi.net/drive/2019/09/27/0013/1931/878475/75/… остается разве что сделать ::after, фоном которого будет картинка с background-size: cover, а .bg задать градиент в качестве фона Commented 27 сент. 2019 в 13:02
  • получилось jsfiddle.net/9yemp6b1/1/show Commented 27 сент. 2019 в 13:24
  • впрочем, нашел вариант еще проще: если в вашем примере у .bg поменять значение background-size на cover, то эффект будет аналогичным. Спасибо за ответ Commented 27 сент. 2019 в 13:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.