当前位置：文江博客话题详情

背景附件滚动与固定

发布于 2024-12-24 02:33:49 字数 581 浏览 0 评论 0原文

我有一个宽度为 2000px 的背景图像。它是按以下方式准备的：在更高分辨率的显示器中，中心 1000 像素用于内容，左侧和右侧额外 500 像素作为边距。

我希望它以每一个决议为中心。

当我尝试使用 bg {background:url(bg.jpg) no-repeat center topfixed; 进行处理时} 图像正确居中，但显然不滚动。

因此，我将 fixed 替换为 scroll： bg {background:url(bg.jpg) 无重复中心顶部滚动； } 但图像不居中 - 它从左上角开始显示，因此在较小的分辨率下您可以看到不应该可见的左边距。

以下是 jsfiddle.net 上的示例。使用 background-attachment 值 scroll/fixed 并尝试减小结果窗口的大小，希望您能理解我的意思。

你能帮我解决这个问题吗？

原文

分享到QQ

分享到微博

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

发布评论

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

场罚期间 2024-12-31 02:33:49

尝试使用如下所示的 background-attachment 属性

background-attachment:scroll;

Try using the background-attachment property like below

background-attachment:scroll;

回复收藏 0 原文

芸娘子的小脾气 2024-12-31 02:33:49

使用媒体查询。像这样的东西。

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

#left-margin-div {
width:500px;
height:1700px; /*or whatever your height is*/
background-image:url('yourimage.jpg');
position:absolute;
left:-500px;
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

Use media queries. Something like this.

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

#left-margin-div {
width:500px;
height:1700px; /*or whatever your height is*/
background-image:url('yourimage.jpg');
position:absolute;
left:-500px;
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

回复收藏 0 原文

~没有更多了~