如何将CSS调整大小图标带到子img标记上方？

Question

在另一个问题的my answer中，我注意到resize可以对父div的CSS img句柄图标进行模糊处理。在那个答案中它并不重要，因为background无论如何都更合适，可以用来代替。

但是，让我们说（出于某些奇怪的原因）你想要一个可调整大小img内的div，你怎么能把它带到它上面？

我不确定它是否只是某种类型的视错觉，所以我使用带有白色中心的色轮来测试它：

＆＃13;

＆＃13;

div{
  resize:both;
  overflow:hidden;
  height:400px;
  width:400px;
  border: 1px solid black;
}

＆＃13;

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是浏览器比较：

Edge和IE don't support CSS resize因此无法对其进行测试。我相信Opera使用与Chrome相同的引擎，因此它们都失败并不奇怪。但是，它可以像您在Firefox中所期望的那样工作。 Blink有没有修复？

Answer 1

首先，我考虑了::-webkit-resizer伪元素，但经过进一步测试，我发现它只考虑textarea元素，而不考虑使用resize属性的其他元素。这是fiddle显示此行为。

另外，请注意，即使在textarea元素上，::-webkit-resizer样式更改只会在达到某个高度后非常小（非常小）。这也可以通过上面的小提琴重现。

鉴于此，在我看来，＃34;修复＆＃34;的最佳替代方案这个错误是使用a custom JS resizer lib。

（相当于monkeypatchey）纯css解决方法是对孩子z-index

应用否定img

＆＃13;

＆＃13;

div{
  resize:both;
  overflow:hidden;
  height:400px;
  width:400px;
  border: 1px solid black;
}

img {
  position: relative;
  z-index: -1;
}

＆＃13;

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>

＆＃13;

＆＃13;

＆＃13;