Question

我正在尝试实现类似Twitter的图像裁剪器。我有一个图像加载到div处理裁剪本身我只是想知道有没有办法我可以显示较低的不透明度div的溢出然后在div内部？我找不到任何可以实现此目的的样式规则。

<div style="position: relative; width: 300px; height: 300px;" class="jwc_frame">
<img src="data:image/" style="position: absolute; top: 0px; left: 0px; width: 300px;" class="jwc_image" id="preview"><div class="jwc_loader">Upload Image</div>
</div>

Answer 1

您可以使用此技巧： FIDDLE

在容器内我只是将2个div放在同一个图像中。其中一个是＆＃34; crop＆＃34;另一个是完整图像和不透明度（一半），然后使不透明度图像溢出可见，并将裁剪一个放在另一个绝对位置上。

.image {
    width:400px;
    height:300px;
    overflow:visible;
    opacity:0.5;

}
.image-top {
    width:400px;
    height:300px;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

Answer 2

所以这肯定是非常'hacky'，但它的工作原理并不需要额外的div。只需在元素上设置一个巨大的阴影，并设置隐藏在容器上的溢出。

box-shadow:0 0 0 500px rgba(255,255,255,.5);

fiddle-＆GT; http://jsfiddle.net/z8d5n287/

是否可以设置div的溢出样式以降低不透明度

2 个答案: