Линейный градиент не работает при использовании с "background-attachment: fixed"
Я пытаюсь сделать линейный градиент с процентными точками останова при использовании "background-attachment: fixed". Это не работает, как я ожидал.
Я сделал очень простую скрипку по поводу моего вопроса.
https://jsfiddle.net/f8v1h0ac/
HTML
<body>
<header>
Header
</header>
<main>
Main
</main>
</body>
CSS
body {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 300px;
background-attachment: fixed;
/* background-image: linear-gradient(to bottom, black 0px, white 300px); */
/* The code above is working but the code below is not. Note that the color at the bottom line of header is supposed to be white. */
background-image: linear-gradient(to bottom, black 0%, white 100%);
}
main {
height: 2000px;
}
PS: я полагаю, это происходит потому, что высота градиента соответствует высоте окна. Но я понятия не имею, как решить эту проблему.
1 ответ
Будет ли это работать для вас? Я поместил содержимое заголовка в div.
header {
height: 300px;
background-attachment: fixed;
}
div {
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, black 0%, white 100%);
}