Я хочу разместить фиксированный фон за изображениями с абсолютным расположением, используя CSS - PullRequest
Новая
       18

Я хочу разместить фиксированный фон за изображениями с абсолютным расположением, используя CSS

1 голос
/ 11 марта 2019

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

вот HTML-код для изображений 

<div class="front bg" style="border:5px dashed black;">
    <img id="dp" src="images/dp.jpg" alt="Face Up Front">
    <img id="finger-face" src="images/gall12.jpg" alt="Finger Face">
    <img id="with-friend" src="images/gall19.jpg" alt="With Friend">
</div>

вот CSS, который я пробовал 

 .bg{
    background-image: url('images/showoff.jpg');
    background-size:100vw 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position:relative;
}

#dp{
    width:16%;
    height:auto;
    position:absolute;
    top:15%;
    right:8%;
    border-radius: 30px;
}

#finger-face{
    width: 15%;
    height:auto;
    position: absolute;
    top: 55%;
    left: 8%;
}

#with-friend{
    width: 30%;
    height:auto;
    position: absolute;
    top: 25%;
    left: 35%;
    border-radius: 30px;
    box-shadow: -1px -1px 6px 0px #ff0000;
}

РЕДАКТИРОВАТЬ: Потратив всю ночь на шлифовку в этом беспорядкеЯ столкнулся с тем, что моя интуиция говорит мне, что это не очень профессиональное и долгосрочное решение, но это урок, который сделал это для меня.Я добавил свойство background-attachment:fixed в стилях bg.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page

Я действительно хочу знать, является ли это профессиональным и практическим решением.И я понятия не имею, какую роль должен играть html{height:100%; margin:0;}.Поэтому я буду признателен за любые предложения или комментарии.

Ответы [ 2 ]

1 голос
/ 11 марта 2019

Если я правильно вас понимаю, вы хотите эффект параллакса.С одной только css существует только одно решение: background-attachment:fixed

С другой стороны, это не работает некорректно на некоторых мобильных устройствах.

Однако, если вы хотите использовать сторонние библиотеки инемного javascript, есть несколько хороших решений, которые уже существуют

parallax.js Stellar.js

и многие другие.Google воздаст тебе больше.Что касается его профессионального и практического использования, то не вижу проблем ни с одним из них.

0 голосов
/ 11 марта 2019

Используйте background-attachment: scroll или background-attachment: local вместо background-attachment: fixed

...