Question

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

我所尝试的是将晕影的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;
    }

你会在那里看到各种定位组合，但是如何定位填充位似乎并没什么不同。

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

Answer 1

不知道这对性能有多好，但是：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框阴影）

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

尝试在网页上创建固定的插图

2 个答案: