Javascript .slideDown或.animate（{到背景图像上方但标记之前的图像）？

因此，我有一个带有文本内容的div和一个background属性

样本加价：

Yada Yada，文本内容，Lorem Ipsum，Sally喜欢Joe，Joe讨厌Sally，其实并不重要，因为Sally是一个…文本内容

示例css：

#largeicedcoffee { 
    width: 500px;
    height: 300px;
    background: url('..images/greytexture.jpg");
}

我想做的是：

我想要一个三角形在背景图像上面“分层”，但在文本后面。它的不透明度为.5；不，我不想把它放在文本上，因为文本会受到影响

我想要的效果是三角形从上到左，看起来像是从三角形最高点的起点开始，然后向下

现在，我知道使用jQuery和CSS3，您可以使用.slideDown或.animate{或使用CSS3来实现这一点，例如：transition:top 300ms cubic-Bezier 0.17、0.04、0.03、0.94；在常规元素或前景元素上

但是，所有的想法都是通过背景图像>绘制三角形>规则标记所描述的图层方面来实现的

---

有没有比只有3个元素的位置：绝对；和切换z-指数：交叉；更好/更稳定的方法？这是唯一的方法吗？

我不确定是否理解整个想法，但听起来我可以用另一种方法来做这件事，或者在IMOWell上有没有更好的方法，不是真的；因为位置绝对的分层te和zindex是一种很糟糕的做法，而且几乎是一种黑客行为。我想知道是否有一种“合法”的方法来做到这一点。我相当肯定它可以用JS来完成。但它是有效的……在这种情况下，我可能会使用canvas使它更干净