CSSオーバーフローでの透明イメージマスク

Question

私はcssプロパティに相当する "overflow：transparent 50％"を実装しようとしています。たとえば、私はこれを持っている：

<div style="border: 1px solid black; width: 200px; height: 200px; overflow: visible;"> 
<img src="img.png"> 
</div> 

私は200x200ボックスに表示される画像の部分を正常にしたいと思います。 200x200ボックスをオーバーフローさせる画像の部分は、部分的に透明にしたい。多分、main divの周りに4つのdivを定義することによってこれを行う方法がありますか？私はこれを行う簡単な方法がわからない。

画像の幅と高さは手前で分かります。 divはドラッグによって画像の再配置を可能にするためにjavascriptが付いているので、divはビューポートのように動作し、画像はいずれの側でもオーバーフローする可能性があります。理想的には、すべてのブラウザで作業する必要があります。

Answer 1

ないブラウザのサポートは次のようになりどれだけ確認してください、しかし、このような何かがあなたを始める必要があります。

<style> 
    /* .container needs to be same size at img */ 
    .container {width:400px; height:400px; background:#00f; opacity:0.5; margin:0 auto; position:relative; z-index:1;} 
    /* .container:before 1/4 img width, 1/2 img height, left 0, top 1/4 img, */ 
    .container:before {content:""; display:block; width:100px; height:200px; position:absolute; left:0px; top:100px; z-index:15; background:#0f0; opacity:0.5;} 
    /* .container:before 1/4 img width, 1/2 img height, left 3/4 img, top 1/4 img */ 
    .container:after {content:""; display:block; width:100px; height:200px; position:absolute; left:300px; top:100px; z-index:15; background:#0f0; opacity:0.5;} 
    /* .img would be your actual img at full size */ 
    .img {display:block; width:400px; height:400px; position:absolute; z-index:10; background:#f00;} 
    /* .img:before same width as img, 1/4 height, top 0, left 0 */ 
    .img:before {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:0px; z-index:15; background:#00f; opacity:0.5;} 
    /* .img:after same width as img, 1/4 height, top 3/4 img height, left 0 */ 
    .img:after {content:""; display:block; width:400px; height:100px; position:absolute; left:0px; top:300px; z-index:15; background:#00f; opacity:0.5;} 
</style> 
<div class="container"> 
    <span class="img"></span> 
</div> 

編集：JSフィドルのリンクを忘れてしまいました。 http://jsfiddle.net/BradleyStaples/rWzng/