html - 如何在 div 顶部创建参差不齐的边缘？

Question

我有这个 div，我想为其创建一个顶部参差不齐的边缘。看起来像说，撕破的纸边。我有一个 png 文件。

我尝试使用背景图像声明，调整其 y 位置以将其向上移动，但问题是当它“超出 div”时，它不会显示。

我尝试了 z-index 无济于事。谢谢你的帮助

CSS

#maininner {
  background-clip: content-box;
  background-color: white;
  background-image: url("/image/wonderlit-tmeplate/paper-ragged-top.png");
  background-position: 1px -9px;
  background-repeat: repeat-x;
  border-radius: 6px 6px 6px 6px;
  overflow: visible;
  position: relative;
  z-index: 99999;
}

图片：imageshack.us/photo/my-images/191/hufz.jpg