Question

我有一张必须在后台拍摄的大图像。

说图像是正方形。现在当有人在任何一个方角上进行鼠标悬停时，图像应该变为图像的绿色版本。

实际上背景图像会保留，但我必须以某种方式将绿色图像切片覆盖在背景图像上。

所以我有一个名为'background.png'的文件，然后是'corner1.png'，corner2.png等。

我该如何实现？我是否必须知道将图像正确放置在角落的确切像素数？

Answer 1

您应该可以使用CSS将角落图像叠加到背景图像的每个角落。您不需要知道放置它们的角落图像的大小，只需使用对齐参数，

鼠标悬停操作将与那些不可见的图像对象相关联。

Answer 2

<div class="image">
    <div class="top left" onmouseover="javascript: cornerHover();" />
    <div class="top right" onmouseover="javascript: cornerHover();" />
    <div class="bottom left" onmouseover="javascript: cornerHover();" />
    <div class="bottom right" onmouseover="javascript: cornerHover();" />
</div>

<style>
    div.image {background: url() top left no-repeat;
    div.image > div { position: absolute; width: 10px; height: 10px; }
    div.image > div[class=top] { top: 0; }
    div.image > div[class=bottom] { bottom: 0; }
    div.image > div[class=left] { left: 0; }
    div.image > div[class=right] { right: 0; }

    /* if corners need to have a different background */
    div.image > div[class=top][class=left] { background: url(); }
    div.image > div[class=top][class=right] { background: url(); }
    div.image > div[class=bottom][class=left] { background: url(); }
    div.image > div[class=bottom][class=right] { background: url(); }
</style>

可能需要一些微调

Answer 3

以下示例在background.png（具有自己的角落背景）的四个角上有热点，当这些热点被鼠标悬停时，会在背景上显示叠加图像（但不会在角落上方）。这可以改变以删除角落图像等。这是你要找的吗？

<style>
  #bgImage { position: relative; background: url(background.png) top left no-repeat; width: 500px; height: 500px; }
  #overlayImage { position: absolute; width: 500px; height: 500px; background-position: top left; background-repeat: no-repeat; }
  #bgImage a.top, #bgImage a.right, #bgImage a.bottom, #bgImage a.left { position: absolute; width: 25px; height: 25px; cursor: pointer; display: block; }
  #bgImage a.top { top: 0; }
  #bgImage a.right { right: 0; }
  #bgImage a.bottom { bottom: 0; }
  #bgImage a.left { left: 0; }
  #bgImage a.top-left { background: url(corner1.png) top left no-repeat; }
  #bgImage a.top-right { background: url(corner2.png) top left no-repeat; }
  #bgImage a.bottom-left { background: url(corner3.png) top left no-repeat; }
  #bgImage a.bottom-right { background: url(corner4.png) top left no-repeat; }
</style>

<script>
    function ShowOverlay()
    {
        document.getElementById("overlayImage").style.backgroundImage = "url(green-overlay.png)";
    }

    function HideOverlay()
    {
        document.getElementById("overlayImage").style.backgroundImage = "none";
    }
</script>

<div id="bgImage">
    <div id="overlayImage"></div>

    <a class="top left top-left" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
    <a class="top right top-right" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
    <a class="bottom left bottom-left" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
    <a class="bottom right bottom-right" onmouseover="ShowOverlay()" onmouseout="HideOverlay()"></a>
</div>

翻转图像

3 个答案: