如何在图像上生成不同颜色的图层 - How to generate a layer of different color over an image?

How to generate a layer of different color over an image?

本文关键字：颜色图层图像 | 更新日期: 2023-09-27

我在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 - stack - download

我希望这能对有同样问题的人有所帮助。

这是一个糟糕的方法，

我不是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; }

您可以将不透明度较低的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。

您可以使用::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的绿色背景框。当你把鼠标移到它上面时，它就会摆脱这个方框。