0

我想在网页上叠加一个小插图。小插图将固定到页面的可见部分（即窗口），页面将在其下方上下滚动。我认为必须有比我尝试的方式更好的方法（这是行不通的）。

我尝试过将小插图的 4 个角作为 4 个单独的图像，它们被定位为“固定”并且具有增加的 z-index。这很好用。但我想填补角落图像之间的空白。我已经创建了一些我希望在角落之间重复的小插图的适当区域的薄片。但我似乎无法以一种允许我填补空白的方式排列我的 div。目前我有 4 个小插图的角落部分，角落之间没有任何东西。

这是我尝试和组织 div 的代码的一部分。div的“left”和“right”类分别浮动：

<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;
    }

您会在那里看到各种定位组合，但我如何定位填充位似乎没有太大区别。

关于如何完成这项工作的任何想法？

4

2 回答 2

3

不知道这对性能有多好，但是：http ://codepen.io/hwg/pen/onapH

html:before {
 position:fixed;
 width:100%;
 height:100%;
 content:"";
 box-shadow: 0px 0px 220px black inset;

 pointer-events:none;
 z-index:1000;

 }

没有额外的标记！

（这基本上是一个整页的 CSS3 盒子阴影）

于 2013-06-20T14:56:17.733 回答
2 
.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;
}
于 2013-06-20T14:54:23.510 回答