移动 div 上隐藏的溢出不起作用答案

【问题标题】：Overflow Hidden on Moving Div Not Working移动 div 上隐藏的溢出不起作用
【发布时间】：2020-01-03 22:45:41
【问题描述】：

我正在尝试制作一个包含背景图片的移动 div。现在，这个 div 有一个overflow: hidden。我制作了两个包含相同图像的图像标签。第一个是带有grayscale(100%) 的背景壁纸，第二个在div 内，溢出隐藏。

现在，在jquery 中，我放置了mousemove 事件，以便移动包含图像的div（div 的id 是'#color_peek'）。但是里面的图像不应该移动，好像给它一种彩色放大镜的效果。

我的问题是overflow: hidden 不起作用。

这里是sn-p：

$(document).ready(function() {
  $(document).mousemove(function(event) {
    $('#color_peek').css({
      top: (event.pageY - ($('#color_peek').width() / 2)) + 'px',
      left: (event.pageX - ($('#color_peek').height() / 2)) + 'px'
    });
  });
});

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.wallpaper {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 1366px;
  height: 768px;
  -webkit-filter: brightness(100%) contrast(120%);
  z-index: -1000;
}

.actual {
  -webkit-filter: grayscale(100%);
}

#color_peek {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid white;
  border-radius: 50px;
  overflow: hidden;
}

#color_peek img {
  position: fixed;
  top: 0px;
  left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <img src="http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg" class="wallpaper actual">
  <div id="color_peek">
    <img src="http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg" class="wallpaper">
  </div>
</body>

【问题讨论】：

问题不在于div移动，你可以通过去掉js来测试。它与 position: fixed 一起使用，当你取下它们时它可以工作（但不是你想要的方式）

标签： jquery html css overflow grayscale

【解决方案1】：

尝试使用background: url('image_url') fixed; 作为您的放大镜元素。

我提供了一个简单的示例，您应该能够在此基础上开发您的解决方案：

$(document).ready(function() {
  $(document).mousemove(function(event) {
    $('#color_peek').css({
      top: (event.pageY - ($('#color_peek').width() / 2)) + 'px',
      left: (event.pageX - ($('#color_peek').height() / 2)) + 'px'
    });
  });
});

body {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg');
}

#color_peek {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50px;
  background: url('http://usa-wallpapers10.net/wp-content/uploads/images/22/mardi-gras.jpg') fixed;
  -webkit-filter: brightness(150%) contrast(150%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="color_peek">
  </div>
</body>

【讨论】：