減少不透明度的元素部分是去除div

Question

嗨，請看我的html代碼。

$(function() { 
 
    $(".new-img").draggable(); 
 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="all"> 
 
    <div class="new-multiple"> 
 
    <div class="new-img"> 
 
     <img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg"> 
 
    </div> 
 
    
 
    </div> 
 
</div>

https://jsfiddle.net/vd11qyzv/23/

在這裏，我想減少圖像部分這是會在div [不用於全不透明度圖像之外的不透明度，但對於部分外出的。新 - 多個div]。

可能嗎？請指教 。

Answer 1

您可以用與不透明性和圖像的藍色區域高的z-index添加元素會下這樣的：

但你將不再能外dragg圖像，除非您在放置後更改圖像的z-index。

$(function() { 
 
    $(".new-img").draggable({ 
 
     start: function(event, ui) { $(this).css('z-index','99'); }, 
 
     stop: function(event, ui) {$(this).css('z-index','9999999');} 
 
    }); 
 
});

.all{ 
 
    background-color:blue; 
 
    position:relative; 
 
    width:500px; 
 
} 
 
.all:after { 
 
    position: absolute; 
 
    content: " "; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 198px; 
 
    z-index: 9999; 
 
    background: rgba(0, 0, 127, 0.68); 
 
} 
 
.new-multiple{ 
 
    width:300px !important; 
 
    height:300px !important; 
 
    background:white; 
 
    border:2px solid red; 
 
    overflow:visible; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="all"> 
 
    <div class="new-multiple"> 
 
    <div class="new-img"> 
 
     <img src="https://launchbit.com/carbon-i/6599-ToptalCarbon.jpg"> 
 
    </div> 
 
    
 
    </div> 
 
</div>

Answer 2

如果你想要的形象是半透明的話，我已經更新了你的代碼：

https://jsfiddle.net/vd11qyzv/24/

HTML

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

CSS

.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; 
} 

JS

$(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}) 
    } 
}); 
});