css溢出透明图像蒙板

我想实现一个CSS属性的等效：“overflow：transparent 50％”。举例来说，如果我有这样的：css溢出透明图像蒙板

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

我想在200x200的框中显示的图像的一部分是正常的。溢出200x200框的图像部分我想部分透明。也许有办法通过在主div上定义四个div来做到这一点？我不确定一个简单的方法来做到这一点。

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

图像宽度和高度是事先知道的。该div将附加一些javascript以允许通过拖动来重新定位图像，因此div将像视口一样工作，并且图像可能会在任何一边溢出。理想情况下，需要在所有浏览器中工作。

来源

2011-10-09 mjibson

正常情况下，溢出会将内容的额外部分“推”到容器的右侧和底部。你是否希望将它平等地推到四面？（如在你的图中） –

你事先知道图像的宽度/高度还是“未知”？你需要支持哪些浏览器？ – thirtydot

图像宽度和高度是事先知道的，是的。该div将附加一些javascript以允许通过拖动进行图像重新定位，因此div将像视口一样工作，并且图像可能会在任何一边溢出。理想情况下，需要在所有浏览器中工作。 – mjibson

不知道浏览器的支持将如何好可以，但这样的事情应该开始你了：

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

来源

2011-10-09 02:52:14

这适用于当前的IE，Chrome和Firefox。谢谢。 – mjibson

但**。容器**的不透明度需要设置为1的权利？ – Adam

css溢出透明图像蒙板

回答

相关问题