如何将 CSS 调整大小图标放在子 img 标签上方？答案

【问题标题】：How can I bring the CSS resize icon above a child img tag?如何将 CSS 调整大小图标放在子 img 标签上方？
【发布时间】：2017-11-08 00:20:29
【问题描述】：

在my answer 的另一个问题中，我注意到父div 的CSS resize 句柄图标可以被img 混淆。在那个答案中，这并不重要，因为background 无论如何更合适，可以代替使用。

但是，假设（出于某种奇怪的原因）您想要一个可调整大小的div 中的img，您怎么能把图标放在它上面呢？

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

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

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

这是一个浏览器比较：

Edge 和 IE don't support CSS resize 因此无法对其进行测试。我相信 Opera 使用与 Chrome 相同的引擎，因此它们都失败了也就不足为奇了。但是，它可以在 Firefox 中正常工作。 Blink 有修复方法吗？

【问题讨论】：

这实际上很奇怪......想到了::-webkit-resizer 伪，但正如this fiddle 所示，它仅适用于textarea 元素，不适用于具有resize 属性的常规元素。似乎还有一个奇怪的错误，对 ::webkit-resizer 伪所做的所有更改仅在 textarea 达到特定高度时才适用
鉴于示例和测试（并考虑跨浏览器实现，如果这甚至是一个问题，因为 FF 似乎没有这个错误），唯一的方法是让图标在前面孩子img 是使用 JS 或 apply position: relative and z-index: -1 to the img （不想把它变成答案，因为这对我来说似乎太猴子了）
@AlexandreWiechersVaz 哇，真奇怪。这不是一个理想的解决方案，但它仍然是一个 - 我会将它添加为答案，这样每个人都知道它已经被考虑过:)
是的，你是对的，这对任何可能面临这个问题的人都有好处，会在一分钟内完成

标签： html css

【解决方案1】：

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

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

鉴于此，在我看来，“修复”此错误的最佳替代方法是使用 a custom JS resizer lib。

一个（相当monkeypatchey）纯css解决方法是将否定z-index应用于子img

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

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

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

【讨论】：