gpt4 book ai didi

html - 如何背景附件: fixed to a div not viewport

转载 作者:行者123 更新时间:2023-11-28 17:33:35 25 4
gpt4 key购买 nike

我有一个大背景封面。

<div id="cover">
...
</div>

和 CSS

#cover {
background:url('cover.jpg') no-repeat fixed center center / cover;
height: 350px;
width: 100%;
}

预期输出:背景图像,调整为 350px x 100%(在我的例子中为 350x900),应该有滚动效果基于 <div id="cover"></div>

实际输出:调整为视口(viewport)(在我的例子中为 1440x900)的背景图像具有基于 <html></html> 的滚动效果。

我想要的是 background-attachment:fixed 相对于 div 而不是视口(viewport)。

最佳答案

背景图像默认“固定”到它们所附加的元素。当您将背景 CSS 属性设置为固定时,它的作用与对 DOM 元素的作用相同,它使整个文档(视口(viewport))固定。

将固定属性更改为滚动应该可以解决这个问题:

background:url('cover.jpg') no-repeat scroll center center / cover;

关于html - 如何背景附件: fixed to a div not viewport,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25528736/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com