php - 在“分层”元素上翻转......可能吗？

Question

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

我有一个 div 区域 button_background，它有一个背景图像。在那个 div 里面是一个 A 标签，它的背景覆盖了 div 的背景。（这是一个半透明的“播放”三角形 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 图像中三角形的深色和浅色版本），然后在悬停时更改背景位置。