Question

我正在使用WordPress网站边栏中的几个元素进行网格化网格的每个元素都是一个带有下面标签的图像我的目标是改变图像：图像的正常状态为绿色（＃66be2c），然后鼠标光标的通过将在原始图像中改变它。
我尝试将两个物理图像用于两个状态，并在需要时将其覆盖。但是这个解决方案非常浪费......加载两个不同的图像文件并不是一件好事。

有一种方法可以更有效的方式达到同样的效果吗？

这是我的网页代码的一部分：

<td style="width: 150px; text-align: center;">
  <p style="color: #66be2c;">
    <img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
  </p
  <p style="color: #66be2c;">.NET</p>
</td>

解决方案：

正确的方法是创建一个矢量图像。

您需要的是图像编辑器（例如Adobe Illustrator或其他）和C编译器（特别是xslt的两个库）

这两个链接可能很有用：SVG-Stacking_Guide和GitHub-SVG-Stacking-Download

我希望这可以帮助那些遇到同样问题的人。

Answer 1

这是一个糟糕的方法，

我不是CSS或设计方面的专家，但我认为你应该这样做：

<div class='overlay'></div>
  <img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>

并在CSS中放置一个类：

.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }

Answer 2

您可以将具有较低不透明度的DIV覆盖到图像上，然后注册悬停以使覆盖div消失，并显示真实图像。

<div class='cover'></div>
<img id='your-image' />

图像的CSS就是这样：

.cover{
   position: absolute;
   top: 0;
   left: 0;
   opacity: .7;
   background: green;
   /* additional transition effects */
   -webkit-transitions: all .3s;
   -moz-transitions: all .3s;
   transitions: all .3s;
}

.cover:hover{
    opacity: 0;
}

注意覆盖 div和图片应位于包含div的相同中相对于彼此。

Answer 3

您可以使用::before选择器来实现此目的。这意味着不使用任何额外的标记，也没有使用JavaScript。你也不会因为不使用内联css而受益。看看CSS :: Before

<强> HTML：

<table>
<tr>
<td>
  <p>
    <img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
  </p
  <p>.NET</p>
</td>
</tr>
</table>

<强> CSS：

td {
    width: 150px;
    text-align: center;
}

td p {
    color: #66be2c;
}

.image {
    width:50px; 
    height:50px;
    position: relative;
}

.image::before {
    content: "";
    position: absolute;
    height: 50px;
    width: 50px;
    top: 0;
    left: 0;
    background: green;
}

.image:hover::before{
    display: none;
}

基本上，这会使用.image类来定位您的图像，并在其顶部放置一个带有绿色背景的50 x 50px框。当你将鼠标移到它上面时，它就会摆脱这个盒子。

您可以在this fiddle

中看到这种情况

如何在图像上生成不同颜色的图层？

3 个答案: