HOME FORUMS MEMBERS RECENT POSTS LOG IN  
× Авторизация
Имя пользователя:
Пароль:
Нет аккаунта? Регистрация
Баннер 1   Баннер 2
НОВЫЕ ТОРГОВАЯ НОВОСТИ ЧАТ
loading...
Скрыть
Вернуться   ANTICHAT > ПРОГРАММИРОВАНИЕ > Общие вопросы программирования
   
Ответ
 
Опции темы Поиск в этой теме Опции просмотра

  #1  
Старый 15.01.2021, 13:40
leekyrave
Постоянный
Регистрация: 02.08.2019
Сообщений: 413
С нами: 3569905

Репутация: 98
По умолчанию

Хай,есть сайт - tools.mint-plantation.ru и в нем можно увидеть баг,когда пролистываешь вниз - градиент багается

Сам код:

HTML:





Код:
☰

Mint Tools

зачем...

Mint Plantation © 2021

Все права защищены.Любое копирование материала запрещено!

Любое копирование материала запрещено!


CSS:





Код:
body
{
background-image
:
linear-gradient
(
135deg
,
#EAD6EE
,
#A0F1EA
)
;
font-family
:
"Lato"
,
sans-serif
;
display
:
flex
;
flex-direction
:
column
;
height
:
-webkit-fill-available
;
}
html, body, #wrap
{
height
:
100%
;
}
body > #wrap
{
height
:
auto
;
min-height
:
100%
;
}
#main
{
transition
:
margin-left .5s
;
padding-bottom
:
150px
;
}
#particles-js
{
width
:
100%
;
height
:
100vh
;
position
:
fixed
;
top
:
0
;
left
:
0
;
z-index
:
-50
;
}
#footer
{
position
:
relative
;
margin-top
:
-150px
;
/* negative value of footer height */
height
:
150px
;
clear
:
both
;
}
/* CLEAR FIX*/
.clearfix:after
{
content
:
"."
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;
}
.clearfix
{
display
:
inline-block
;
}
/* Hides from IE-mac \*/
* html .clearfix
{
height
:
1%
;
}
.clearfix
{
display
:
block
;
}
/* End hide from IE-mac */
.footer .text
{
position
:
absolute
;
left
:
50%
;
margin-right
:
-50%
;
transform
:
translate
(
-50%
,
-50%
)
;
font-family
:
"Lato"
,
sans-serif
;
}


Как починить?
 
Ответить с цитированием

  #2  
Старый 15.01.2021, 20:44
MrTNTminer
Познающий
Регистрация: 17.04.2018
Сообщений: 39
С нами: 4249586

Репутация: 23
По умолчанию

Как я понял речь идет об этом:

Цитата:
Сообщение от Спойлер  

В обычном виде:



Если немного непонятно, увеличил:



Чтобы весь background-image двигался за пользователем (двигался вниз, так сказать ;d), нужно добавить к элементу body
Код:
background-attachment: fixed;
. Это означает что весь background-image не будет менять своего местоположения, отрывок с специализированного сайта (link):

Цитата:

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.
Надеюсь поможет, возможно я сказал что-то не правильно, другие могут поправить меня.
 
Ответить с цитированием
Ответ



Предыдущая тема Следующая тема

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 


Быстрый переход




ANTICHAT ™ © 2001- Antichat Kft.