“分层”元素上的滚动......可能吗？

Question

我将如何执行以下操作，最好只使用CSS（但也可能是jquery）和PHP。

我有一个div区域button_background，它有一个背景图片。在div内部是一个A标签，其背景覆盖了div的背景。 （它是一个半透明的'play'三角形png，它覆盖了视频中的静止图像）。我想在翻转时更改A标签的背景（更深的三角形）。

自：

-------------
| ($still)  |
|     \     |
|      \    |
|      /    |
|     /     |
-------------

要

-------------
| ($still)  |
|    *\     |
|    **\    |
|    **/    |
|    */     |
-------------

请注意，我是从PHP生成的，而按钮背景图片的url是一个名为$ still的变量。

这是粗略的HTML：

<div class="button_background">
  <a class="button_overlay" href="page.html"></a>  
</div>

Answer 1

你可以使用较暗的图像开始，并将CSS中的初始状态设置为较低的不透明度。

a.button_overlay { background:url(images/triangle.png); opacity:0.5;}

在悬停时将不透明度更改为1，IE将需要MS特定的过滤器属性。

您也可以使用精灵图像（同一个PNG图像中的三角形的深色和浅色版本），只需在悬停时更改背景位置。