1

我正在尝试在使用“背景附件：固定”时使用百分比断点制作线性渐变。它没有按我的预期工作。

我对我的问题做了一个非常简单的小提琴。

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：我猜这是因为渐变的高度与窗口高度相关。但我不知道如何解决这个问题。

4

1 回答 1

0

这对你有用吗？我将标题内容放在一个div中。

header { 
  height: 300px;
  background-attachment: fixed;
}
div {
  width: 100%;
  height: 100%;  
  background-image: linear-gradient(to bottom, black 0%, white 100%);
}

https://jsfiddle.net/wazz/xkgkam74/

于 2017-10-21T22:23:37.247 回答