.slideDown或.animate({到背景图像上方的图像但是在标记之前?

时间:2015-07-09 15:07:51

标签: javascript jquery css css3 svg

所以,我有一个包含文本内容和背景属性的div。

样品加价:

<div id="largeicedcoffee">Yada Yada, text content, Lorem Ipsum, Sally likes Joe, Joe Hates Sally, doesn't really matter because Sally is a... text content</div>

示例css:

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

我正在尝试做什么:

我想在背景图片 < EM>文本。它的不透明度为.5; (不,我不想将其放在文本上,因为文本会受到影响)

enter image description here

我想要的效果是从上到左进入的三角形(看起来像是从三角形的最高点的起点绘制到位).. 然后向下。

现在,我知道使用jQuery和CSS3,您可以使用.slideDown or .animate({或CSS3,例如:transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);在常规元素或前景元素上执行此操作。

但是,任何关于通过描述背景图像的层方面实现这一点的想法&gt;绘制三角形&gt;定期加价。

是否有更好/更稳定的方式,只有3个元素position: absolute;并切换z-index:;这是唯一的方法吗?

0 个答案:

没有答案