За неподвижной пнг-картинкой двигается фон

@Glass4217 · Регистрация: 12.01.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, уважаемые программисты.
Помогите решить непростой вопрос.

Как сделать так, чтобы фон - все время двигался бы влево, а пнг-картинка с прозрачным фоном (смайлик.png) - все время находилась бы поверх фона (Внизу посередине страницы) и не двигалась бы ?

(Получится такой эффект, что за неподвижной пнг-картинкой - двигается фон.)

@shvyrevvg · 30.08.2019, 08:28

Сообщение от Glass4217

Как сделать так, чтобы фон - все время двигался бы влево, а пнг-картинка с прозрачным фоном (смайлик.png) - все время находилась бы поверх фона (Внизу посередине страницы) и не двигалась бы ?

Glass4217, это можно сделать на чистом css, на js с канвасом, на js без канваса, и т.д. Какой вариант нужен?

@Glass4217 · 30.08.2019, 14:42 **[ТС]**

на js без канваса

@ТабуретY · 30.08.2019, 17:11

Сообщение от Glass4217

на js без канваса

Если согласитесь на css

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
        body {
      height: 100%;
      width: 100%;
      background-image: url("image.jpg");
      animation: scroll linear 10s infinite;
    }
 
    @keyframes scroll {
      from {
        background-position: 0 0;
      }
      to {
        background-position: 100% 0;
      }
    }
    </style>
</head>
<body>
    <img src="hero.jpg" width="250px">
</body>

@Glass4217 · 30.08.2019, 18:39 **[ТС]**

ТабуретY, а как здесь - регулировать скорость ?

@ТабуретY · 30.08.2019, 18:59

Сообщение от Glass4217

а как здесь - регулировать скорость ?

Вот тут

PHP/HTML
1
 animation: scroll linear 10s infinite;

чем меньше число, тем быстрее

@Glass4217 · 30.08.2019, 19:52 **[ТС]**

ТабуретY, понятно.
А как смайлик - внизу посередине страницы разместить ?

@ТабуретY · 30.08.2019, 21:12

Сообщение от Glass4217

внизу посередине страницы разместить ?

Что-то такое

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
 body {
      height: 100%;
      width: 100%;
      background-image: url("image.jpg");
      animation: scroll linear 20s infinite;
    }
 
    .center-img {
      position: fixed; 
      bottom: 0; 
      right: 50%;
    }
 
    @keyframes scroll {
      from {
        background-position: 0 0;
      }
      to {
        background-position: 100% 0;
      }
    }
    </style>
</head>
<body>
    <img class="center-img" src="hero.jpg" width="250px">
</body>

@Glass4217 · 30.08.2019, 21:27 **[ТС]**

ТабуретY, спасибо.
Теперь все нормально.

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79

	За неподвижной пнг-картинкой двигается фон 30.08.2019, 07:54. Показов 2183. Ответов 8 Метки нет (Все метки) Здравствуйте, уважаемые программисты. Помогите решить непростой вопрос. Как сделать так, чтобы фон - все время двигался бы влево, а пнг-картинка с прозрачным фоном (смайлик.png) - все время находилась бы поверх фона (Внизу посередине страницы) и не двигалась бы ? (Получится такой эффект, что за неподвижной пнг-картинкой - двигается фон.) Миниатюры 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 14:42 [ТС]
	на js без канваса 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 18:39 [ТС]
	ТабуретY, а как здесь - регулировать скорость ? 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 19:52 [ТС]
	ТабуретY, понятно. А как смайлик - внизу посередине страницы разместить ? 0

@Glass4217 0 / 0 / 0 Регистрация: 12.01.2019 Сообщений: 79
	30.08.2019, 21:27 [ТС]
	ТабуретY, спасибо. Теперь все нормально. 0

За неподвижной пнг-картинкой двигается фон

Решение