सीएसएस अतिप्रवाह

Question

पर पारदर्शी छवि मुखौटा मैं एक सीएसएस संपत्ति के बराबर लागू करने के लिए कोशिश कर रहा हूँ। उदाहरण के लिए, अगर मैं इस:

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

मैं छवि 200x200 बॉक्स में प्रदर्शित के हिस्से की तरह सामान्य होने के लिए चाहते हैं। 200x200 बॉक्स को ओवरफ्लो करने वाली छवि का हिस्सा मैं आंशिक रूप से पारदर्शी होना चाहता हूं। शायद मुख्य div के चारों ओर चार divs परिभाषित करके ऐसा करने के तरीके हैं? मुझे यह करने का आसान तरीका नहीं है।

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

छवि चौड़ाई और ऊंचाई हाथ से पहले जानी जाती है। div कुछ इसे से जुड़े खींचकर छवि पुनः स्थिति के लिए अनुमति देने के लिए जावास्क्रिप्ट होगा, इसलिए 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> 

संपादित करें: भूल गया जे एस फिडल लिंक। http://jsfiddle.net/BradleyStaples/rWzng/