Question

首先发布在这里，所以请温柔！我正在制作一种效果，它依赖于相同颜色（黑色）和不透明度（0.9）的div彼此相邻。在鼠标移动事件中使用JS重新调整div的大小。这应该创建一个无缝叠加（我不能只用一个叠加元素来做，因为效果需要在中心有一个透明的png，后面没有叠加。）效果很好，没有任何透明度应用于叠加，但是当应用透明度时，div之间会出现一个微小的间隙，从而破坏效果，因为叠加层后面的内容显示了间隙。间隙不一致，但是当div调整大小时来来去去，当检查元素的位置时，返回的数字显示div的边缘完美排列（在视觉上，当没有设置不透明度时它们会这样做。我认为这是一个浏览器错误，因为旧版Chrome和IE中的效果相同。这是一个已知问题，如果有，是否有任何解决方法？已经搜索过高低，但似乎无法在任何地方找到任何提及的问题，因此发布。提前谢谢！

编辑 - 这是我的代码的精简版：

HTML

<div id="contentWrapper">
    <div id="myCursor">
        <div id="cursorTop"></div>
        <div id="cursorBottom"></div>
    </div>
</div>

CSS

#myCursor {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
}

#cursorTop {
    width:100%;
    background-color:#000000;
    opacity:0.9;
    filter:alpha(opacity=90);
}

#cursorBottom {
    width:100%;
    background-color:#000000;
    opacity:0.9;
    filter:alpha(opacity=90);
}

JS

$(document).ready(function(){
    $('#contentWrapper').mousemove(function(e) {
        $('#cursorTop').css('height', e.clientY);
        $('#cursorBottom').css('height', window.innerHeight - e.clientY);
    });
});

进一步编辑 - 这个剥离的示例似乎只显示Edge中的问题，但完整版本也存在问题（在较小程度上）Chrome

Here is a screenshot, as requested

透明元素周围不需要的间隙

0 个答案: