文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么将background-attachment设置为固定会改变背景的宽度行为？

问为什么将background-attachment设置为固定会改变背景的宽度行为？
EN

Stack Overflow用户

提问于 2020-09-15 23:46:02

回答 1查看 49关注 0票数 2

我用CSS和JS (github repo)构建了一个类似于流畅设计的滚动条。滚动条通常工作得很好，但当为包含背景图像的元素(主体或任何子元素)设置background-attachment: fixed时，它就会中断:如果我通过使滚动条部分透明来改变滚动条的宽度，透明区域将呈现为白色(主体的背景色)，图像不会继续显示在滚动条后面；如果我直接更改滚动条的宽度(source)，背景宽度会发生变化，而元素的宽度保持完全不变(=>元素继续位于滚动条后面，但其背景不会继续)。

这里有一个简短的例子来说明我的意思：

(1)无background-attachment: fixed正常工作

<script src="https://tim-greller.de/git/fluent/scrollbar/scrollbar.js"></script>
<link href="https://tim-greller.de/git/fluent/scrollbar/scrollbar.css" rel="stylesheet"/>

<body class="light" style="background: linear-gradient(50deg, #fde6a5, #fac1f8);">
  <div id="content" style="height: 200vh">
    content
  </div>
</body>

(2)现在固定了背景，在滚动条的透明部分后面只显示白色：

<script src="https://tim-greller.de/git/fluent/scrollbar/scrollbar.js"></script>
<link href="https://tim-greller.de/git/fluent/scrollbar/scrollbar.css" rel="stylesheet"/>

<body class="light" style="
            background: linear-gradient(50deg, #fde6a5, #fac1f8);
            background-attachment: fixed;">
  <div id="content" style="height: 200vh">
    content
  </div>
</body>

编辑:使用https链接。

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-20 02:37:16

这个问题似乎在当前的Chromium版本中得到了修复。

票数 0

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

原文链接：

https://stackoverflow.com/questions/63905430

复制

相似问题

问为什么将background-attachment设置为固定会改变背景的宽度行为？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么将background-attachment设置为固定会改变背景的宽度行为？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么将background-attachment设置为固定会改变背景的宽度行为？
EN