CSS：可以做位置：固定偏移中心div？

Question

首先，看一下我想要实现的布局示例（下图）

基本上，我有一个标准的中心div（灰色）和典型的margin: 0 auto。我的问题是我有一个背景图像（在白色溢出区域），<div id="stripes">使用以下CSS

background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;

此背景应用于文档的HTML级别以下#stripes div。

我遇到的问题是设置下面的红色div。计划是让它始终通过position: fixed保持可见，但是，我不能使用基于％right: xx%; top: 0，因为模式必须与条纹图案对齐，因此一些像素偏移将创建一个页面上可见且明显的“接缝”。

以下是包含条纹的效果：

Answer 1

我最终解决这个问题的方法是创建两个div。在顶层，我使用了一个标准width: 960px; margin: 0 auto div，然后在文档的最后我创建了另一个具有相同样式的div，用作照片的容器（上面的红色div）。在第二个div中，我嵌套了一个<div id="photo_bg"> div。这个div使用了以下样式：

#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}

父div被称为#stripes

#stripes {
    background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
    height: 9999px;
    left: 0;
    overflow: visible;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}