Javascript 仅显示div'内的内容；背景图像

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

CSS:

HTML:

在这里，我将在图像中滑动到overlay中，但我不希望图像完全显示出来，而是应该在图像中覆盖overlay div的一部分。 不知道我说的是否有道理。如果我是，这可能吗

---

谢谢

您可以将下一个网站滑入覆盖：

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

---

您希望使用

遮罩图像

，但是浏览器并不广泛支持它

在这里，您可以阅读有关规范的信息：

---

在这里您可以看到支持：

您可以尝试CSS旋转和溢出。

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