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的图像部分的不透明度[不是对于完整图像不透明度，而是对于超出.new-multiple div的部分]。

有可能吗？请指教。

Answer 1

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

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

Answer 2

您可以在蓝色区域中添加具有高z-index的元素并使用不透明度，图像将在其下面，如下所示：

但是除非您在放置后更改图像的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://lorempixel.com/100/100/">
    </div>
    
  </div>
</div>

元素部分的不透明度低于div

2 个答案: