我想在网页上覆盖一个小插图。小插图将固定在页面的可见部分（即窗口），页面将在其下方上下滚动。我认为必须有比我尝试的方法更好的方法（这种方法不起作用）。
我试过的是将小插图的4个角作为4个单独的图像，这些图像定位为“固定”并具有增加的z索引。很好但是我想填补角落图像之间的空白。我创建了几个小插图的适当区域的薄切片，希望在角落之间重复。但是我似乎无法以允许我填补空白的方式来安排我的div。目前，我有四个小插图的角落部分，角落之间没有任何东西。
这是我尝试组织div的代码的一部分。 div的“左”和“右”类分别是浮动的：
<body onload="sizeDivs()" onresize="sizeDivs()">
<div class="left">
<div class="vignette"><img id="vignette_topleft" src="code/images/vignette_topleft.png"/></div>
<div class="vignette_side" id="vignette_left"></div>
<div class="vignette"><img id="vignette_bottomleft" src="code/images/vignette_bottomleft.png"/></div>
</div>
<div class="vignette_top-bottom" id="vignette_top"></div>
<div class="right">
<div class="vignette"><img id="vignette_topright" src="code/images/vignette_topright.png"/></div>
<div class="vignette_side" id="vignette_right"></div>
<div class="vignette"><img id="vignette_bottomright" src="code/images/vignette_bottomright.png"/></div>
</div>
这些事件是javascript函数，可确定所需的div大小，然后设置其高度。
顶部，左侧和右侧填充的CSS为：
.vignette {
z-index: 5;
}
.vignette_top-bottom {
background-repeat: repeat-x;
z-index: 5;
margin: 0 auto;
}
#vignette_topleft {
position: fixed;
top: 0;
left: 0;
}
#vignette_bottomleft {
position: fixed;
bottom: 0;
left: 0;
}
#vignette_topright {
position: fixed;
top: 0;
right: 0;
}
#vignette_bottomright {
position: fixed;
bottom: 0;
right: 0;
}
#vignette_left {
background-image: url("code/images/vignette_left.png");
background-repeat: repeat-y;
position: relative;
left: 0px;
top: 0px;
z-index: 10;
}
#vignette_right {
background-image: url("code/images/vignette_rightred.png");
background-repeat: repeat-y;
position: relative;
right: 0px;
top: 0px;
z-index: 10;
}
#vignette_top {
background-image: url("code/images/vignette_top.png");
position: relative;
}
您会在其中看到各种定位组合，但是我对填充位的定位似乎并没有太大变化。
关于如何进行这项工作的任何想法？
最佳答案
.vignette {
position: fixed;
-moz-box-shadow: inset 0 0 10em #000;
-webkit-box-shadow: inset 0 0 10em #000;
box-shadow: inset 0 0 10em #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
关于css - 尝试在网页上创建固定的插图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17216795/