Фоновая затухающая нагрузка

Я пытаюсь сделать свой фон затухающим при входе на сайт. Я пробовал несколько методов, которые работают. Тем не менее, у меня просто проблемы с фоном на разных разрешениях. Как вы можете видеть при входе на мой сайт, всякий раз, когда вы изменяете размер своего браузера, фон всегда будет посередине. Веб-сайт: http://studi0.ml/ Это именно то, чего я пытаюсь достичь, но тем не менее, земной шар всегда будет посередине. И мой фон - это чистый CSS. Имейте в виду, я только начал дизайн сайта. Я пробовал код в течение 2-3 недель.Фоновая затухающая нагрузка

html, 
 
body { 
 
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    -webkit-transition: background 0.0s linear; 
 
    -moz-transition: background 0.75s 0.0s linear; 
 
    -o-transition: background 0.75s 0.0s linear; 
 
    transition: background 0.75s 0.0s linear; 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
}

источник

2016-05-07 azuz53487

Я не понимаю проблему, так как глобус находится на изображении, не так ли? – phpheini

Да, глобус находится на изображении. Однако в некоторых кодах, когда вы изменяете размер браузера, глобальный будет идти вправо. Если вы нажмете на мой сайт и попытаетесь изменить размер своего браузера, вы увидите, что весь фон перемещается в соответствии с размером браузера. - Извините, если я не так хорошо объясняю, стараюсь изо всех сил. – azuz53487

возможно скриншоты хорошего и плохого поведения и желаемого результата, сделанного в Photoshop, или что-то поможет нам понять. –

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

HTML

<html> 
<head> ... </head> 
<body> 
    <div class="page-bg"></div> 
</body> 
</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
} 

body { 
    position: relative; 
} 

.page-bg { 
    opacity: 0; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed; 
    background-size: cover; 

    animation-name: fadeIn; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-duration: 1s; 
    animation-fill-mode:forwards; 
} 

@keyframes fadeIn { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
}

Конечно, вы, возможно, потребуется добавить polyfills для animation и keyframes деклараций. (т.е. -moz-animation-name, -webkit-animation-name, и т.д ..)

Вот рабочий пример на Plunkr. Мне пришлось поменять картинку, которую вы использовали с одной ссылкой https, чтобы не было проблемы с ее загрузкой.

источник

2016-05-07 16:44:58 ManBearPixel

Большое вам спасибо, сэр! Это именно то, что я искал! Очень признателен! – azuz53487

Нет проблем! – ManBearPixel

Один вопрос, сэр. Мне интересно, как я могу затухать в черном? Я пробовал сделать это: background: # 000 url (http://studi0.ml/EzJsucI.jpg) фиксированный центр центра no-repeat; - Тем не менее, нет результатов :) Спасибо! – azuz53487

ответ

Смежные вопросы