jquery - 是否可以将 div 的溢出设置为具有较低的不透明度

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。一个带有“裁剪”，另一个带有完整图像和不透明度(一半)，然后使不透明度图像溢出可见，并将裁剪一个放在另一个上，位置绝对。

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

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