文章/答案/技术大牛

发布

社区首页 >问答首页 >使用"background-attachment: fixed“时，线性渐变不起作用。

问使用"background-attachment: fixed“时，线性渐变不起作用。
EN

Stack Overflow用户

提问于 2017-10-22 05:14:04

回答 1查看 997关注 0票数 1

我试着在使用"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:我猜这是因为渐变的高度与窗口高度有关。但是我不知道如何解决这个问题。

css

linear-gradients

background-attachment

回答 1

Stack Overflow用户

发布于 2017-10-22 06:23:37

这对你有用吗？我将头内容放在一个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/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46868150

复制

相似问题

问使用"background-attachment: fixed“时，线性渐变不起作用。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用"background-attachment: fixed“时，线性渐变不起作用。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用"background-attachment: fixed“时，线性渐变不起作用。
EN