Question

我将在图像中滑动的div，我希望图像仅出现在div的某个区域，比如三角形区域。 div的其余部分应该只显示div下面的内容。

CSS：

#overlay {
    width: 700px ;
    height: 300px ;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 100;
    background: url("img/overlay.png");
    background-repeat: no-repeat;
}

HTML：

<div class="boxcat" id="websitesbox">
    <div id="overlay"></div>
    <div id="websitesSlider">
        <img src="img/seanswers.PNG" alt="Seanswers screenshot">
        <img src="img/stories.png" alt="Seanswers screenshot">
        <img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
    </div> 
</div>

这里我会将图像滑入叠加层，但我不希望图像完全显示，而只是覆盖div的一部分应覆盖在图像中。不确定如果我有任何意义。如果我有可能吗？

由于

Answer 1

你可以在下一个网站上滑动叠加：

<div class="boxcat" id="websitesbox">
    <div id="overlay">
        <div id="websitesSlider">
             <img src="img/seanswers.PNG" alt="Seanswers screenshot">
             <img src="img/stories.png" alt="Seanswers screenshot">
             <img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
         </div> 
    </div>    
</div>

Answer 2

您想使用mask-image，但浏览器并未广泛支持它。

在这里，您可以阅读规范：http://www.w3.org/TR/css-masking/

在这里，您可以看到支持：http://caniuse.com/#search=mask

仅显示div背景图像中的内容

2 个答案: