Отзывчивое фоновое изображение параллакса с текстом - масштаб до фокуса - PullRequest
Новая
       10

Отзывчивое фоновое изображение параллакса с текстом - масштаб до фокуса

0 голосов
/ 05 декабря 2018

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

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

https://codepen.io/ckatz/pen/Oaqedp

#parallax-container {
    background: url(https://adelphi.dev.fastspot.com/business/wp-content/uploads/sites/15/2018/06/Copy-of-TradingRoom_080-1440x617.jpg);
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;
    min-width: 100vw;
    min-height: 100vh;
    top: 0;
    padding-bottom: 10%;
}

#parallax-text {
    width: 24em;
    position: fixed;
    top: 30%;
    left: 70%;
    margin-left: -12em;
    padding: 30px;
    text-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.4);
}

@media only screen and (max-width: 960px) {
    #parallax-container {
        background-position: 100% 0;
        background-attachment: relative;
    }

    #parallax-text {
        position: absolute;
        margin: 0 auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font: 400 0.7em/1.5em "Open Sans", serif;
        width: 80%;
    }
}
...