0

images でスラ​​イドする 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

次の websiteSlider をオーバーレイに追加できます。

<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 に答える