Question

我想有一个视差滚动标题图像，文字覆盖在顶部。缩小屏幕尺寸时遇到麻烦，因为女人的脸从视口中裁剪掉了。我将如何使背景图像裁剪到那个焦点？

我也不知道最好的方式来处理移动设备上的叠加文字，好像我将其放在图像上居中，然后遮盖了人的脸。有建议吗？

#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%;
    }
}

带有文本的自适应视差背景图像-缩放到焦点

0 个答案: