如何在 div 中固定背景？

发布于 2024-11-19 04:56:16 字数 513 浏览 4 评论 0原文

我有一个网站，在我的一个页面中我使用了一个看起来像编辑器的 div。我可以了解这个 div 及其上面的内容的背景。当我在 div 中滚动时，我希望这个背景保持在固定位置。

我的代码与此类似：

 <div id="myEditorArea"  style="vertical-align: top; width: 240px; height: 320px;      background-image: url('image.png'); background-repeat: no-repeat; background-position: center center; background-attachment:fixed; overflow:scroll; text-align: left;">

 bla bla bla

 </div>

当我在 div 内滚动时，背景保持固定并且工作正常。问题是当我滚动整个页面时它正在移动。

有谁知道可能是什么问题？

提前致谢

原文

I have a site, and in one of my pages I use a div which looks like an editor. I can have a background in this div and the content above it. I want this background to stay in a fixed position while I am scrolling in the div.

My code is similar to this:

 <div id="myEditorArea"  style="vertical-align: top; width: 240px; height: 320px;      background-image: url('image.png'); background-repeat: no-repeat; background-position: center center; background-attachment:fixed; overflow:scroll; text-align: left;">

 bla bla bla

 </div>

The background stays fixed and works ok when I scroll inside the div. The problem is that it is moving when I scroll in the whole page.

Does anyone know what could be the problem?

Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看透却不说透 2024-11-26 04:56:16

以下是 background-attachment:fixed; http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment。这应该就是你所需要的。

回复收藏 0 原文

那一片橙海， 2024-11-26 04:56:16

来源：https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

html:

<div class="cd-fixed-bg cd-bg-1">
        <h1><!-- title goes here --></h1>
    </div>

css:

body, html, main {
    /* important */
     height: 100%;
}

.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("../img/cd-background-1.jpg");
}

source : https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

html:

<div class="cd-fixed-bg cd-bg-1">
        <h1><!-- title goes here --></h1>
    </div>

css:

body, html, main {
    /* important */
     height: 100%;
}

.cd-fixed-bg {
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
background-image: url("../img/cd-background-1.jpg");
}

回复收藏 0 原文

~没有更多了~