Question

我正在尝试使用CSS resize执行可调整大小的画布元素。设置如下：

HTML：

<div class="canvas-wrapper">
  <canvas></canvas>
</div>

CSS：

.canvas-wrapper {
  position: relative;
  overflow: hidden;
  resize: horizontal;
}

.canvas-wrapper canvas {
  width: 100%;
  height: auto;
}

它工作得很好但调整大小句柄总是被画布隐藏。我当然可以向包装器添加一个带有resize属性的额外子元素，并将其放在画布上方，但这看起来相当不优雅。

现在有没有办法影响调整大小句柄的“z-index”？

我已经看过this问题了，但他们也在那里做了一个解决方法。

编辑：似乎句柄在某些浏览器中仍然可用，即使它被画布隐藏（尝试this）。可能该规范对此行为不是很准确。有没有人有关于此的更多信息？

Answer 1

我改变了一点，我认为这是你想要完成的事情

http://jsfiddle.net/aidan2129/U7J9k/

.canvas-wrapper {
  position: absolute;
  overflow: hidden;
  resize: horizontal;
}

.canvas-wrapper2 {
  position: relative;
  overflow: hidden;
  resize: horizontal;
}


.canvas-wrapper canvas {
  width: 100%;
  height: auto;    
  background-color:blue;
}

.canvas-wrapper2 canvas {
  width: 100%;
  height: auto;    
  background-color:red;
}

似乎工作正常我只是将位置设置为绝对，所以它不占用页面的全长，但如果你将结果画布元素调整到右边，你会看到蓝色画布出现在红色画布后面。

希望这有帮助

Answer 2

由于没有一点解决方法似乎没有解决方案，我最终使用了提到的pointer-events: none属性here。这样就可以调整大小调整处理程序（至少对我来说是Firefox和Chrome），无论它是否在画布后面。

对于视觉反馈，我使用了伪元素。请参阅updated fiddle了解它的外观。

CSS调整大小句柄“z-index”

2 个答案: