Mặt nạ hình ảnh trong suốt trên tràn css

Question

Tôi đang cố gắng thực hiện tương đương với thuộc tính css: "tràn: minh bạch 50%". Ví dụ: nếu tôi có điều này:

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

Tôi muốn một phần của hình ảnh được hiển thị trong hộp 200x200 là bình thường. Một phần của hình ảnh tràn ngập hộp 200x200 tôi muốn được một phần trong suốt. Có lẽ có cách để làm điều này bằng cách xác định bốn divs trên tất cả các xung quanh div chính? Tôi không chắc chắn về một cách dễ dàng để làm điều này.

+------------------+ 
| img overflow, | 
| 50% transparent | 
| +------------+ | 
| | normal img | | 
| +------------+ | 
|     | 
+------------------+ 

Chiều rộng và chiều cao hình ảnh được biết trước bàn tay. Các div sẽ có một số javascript gắn liền với nó để cho phép định vị lại hình ảnh bằng cách kéo, do đó, div sẽ hoạt động như một khung nhìn, và hình ảnh có thể tràn trên bất kỳ bên nào. Cần phải làm việc trong tất cả các trình duyệt, lý tưởng.

Answer 1

Không chắc như thế nào hỗ trợ trình duyệt sẽ được, nhưng một cái gì đó như thế này nên bạn bắt đầu:

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

Edit: quên JS Fiddle Link. http://jsfiddle.net/BradleyStaples/rWzng/