0

我将在图像中滑动的 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。不确定我是否有意义。如果我是，这可能吗？

谢谢

4

2 回答 2

0

您可以将下一个网站滑块放入叠加层：

<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>
于 2013-09-02T14:28:06.737 回答
0

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

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

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

于 2013-09-02T14:28:46.977 回答