Javascript 对于超出div的元素部分，不透明度较小

嗨，请看我的html代码

$（函数（）{
$（“.new img”）.draggable（）；
});
。全部{
背景颜色：蓝色；
}
.新倍数{
宽度：400px！重要；
高度：400px！重要；
背景：白色；
边框：2倍纯红；
溢出：可见；
}

您可以在不透明度的蓝色区域中添加具有高z索引的元素，图像将如下所示：

但是除非在拖放后更改图像的z索引，否则您将无法再将图像拖动到外部


$（函数（）{
$（“.new img”）.draggable({
start:function（event，ui）{$（this.css（'z-index'，'99'）；}，
stop:function（event，ui）{$（this.css（'z-index'，'999999'）；}
});
});
。全部{
背景颜色：蓝色；
位置：相对位置；
宽度：500px；
}
.所有人：之后{
位置：绝对位置；
内容：“；
排名：0；
底部：0；
右：0；
宽度：198px；
z指数：9999；
背景：rgba（0,0,127,0.68）；
}
.新倍数{
宽度：300px！重要；
高度：300px！重要；
背景：白色；
边框：2倍纯红；
溢出：可见；
}
您可以在不透明度的蓝色区域中添加具有高z索引的元素，图像将如下所示：

但是除非在拖放后更改图像的z索引，否则您将无法再将图像拖动到外部


$（函数（）{
$（“.new img”）.draggable({
start:function（event，ui）{$（this.css（'z-index'，'99'）；}，
stop:function（event，ui）{$（this.css（'z-index'，'999999'）；}
});
});
。全部{
背景颜色：蓝色；
位置：相对位置；
宽度：500px；
}
.所有人：之后{
位置：绝对位置；
内容：“；
排名：0；
底部：0；
右：0；
宽度：198px；
z指数：9999；
背景：rgba（0,0,127,0.68）；
}
.新倍数{
宽度：300px！重要；
高度：300px！重要；
背景：白色；
边框：2倍纯红；
溢出：可见；
}
如果您希望图像是半透明的，那么我已经更新了您的代码：


HTML

JS

如果您希望图像是半透明的，那么我已经更新了您的代码：


HTML

JS

请解释一下你做了什么？我们可以只用一个img标签吗？我克隆了图像并将其设置为相同的位置，然后将原始图像的不透明度设置为0.5。然后，我将次映像父映像的宽度设置为（位置左侧-容器的宽度）。这会隐藏图像的一部分，但也意味着这仅在将图像向右拖动时有效。您需要为其他边和角添加附加值。可以设置div的背景，也可以使用jQuery克隆。请解释您所做的，我们只能使用一个img标记来执行什么？我克隆了图像并将其设置为相同的位置，然后将原始图像设置为0.5不透明度。然后，我将次映像父映像的宽度设置为（位置左侧-容器的宽度）。这会隐藏图像的一部分，但也意味着这仅在将图像向右拖动时有效。您需要为其他边和角添加其他值。您可以是的，您可以设置div的背景，也可以使用jQuery克隆它。
<div class="all">
<div class="new-multiple">
    <div class="new-img">
    <img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg">
    <div><img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg"></div>
    </div>

</div>
</div>

.all{
    background-color:blue;
}
.new-multiple{
    width:400px !important;
    height:400px !important;
    background:white;
    border:2px solid red;
    overflow:visible;
}

.new-img  {
    display:inline-block;
}  
.new-img > img {
    opacity:0.5;
}

.new-img div {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    overflow:hidden;
}

$( function() {
$( ".new-img" ).draggable({
    drag: function() {
            var left = $(this).position().left - $(".new-multiple").position().left;
        var width = $(this).outerWidth();
        var parentwidth = $(".new-multiple").outerWidth();
        var childwidth = parentwidth - (width + left);

        console.log(left, width, parentwidth)
        console.log(childwidth, width + childwidth);

        $('.new-img div').css({width: width + childwidth})
    }
});
});