Question

你好我有一张在photoshop中制作的照片。它只有一种颜色（html的符号）。它由＃d66a00（橙色阴影）颜色制成。我需要在悬停上添加效果，该图片慢慢传递给另一种颜色。

例如。我现场有一张照片，它是橙色的。当我用鼠标移动图片时，他将从橙色变为蓝色。使用CSS3或javascript可能是这样的，或者我需要使用两张图片并在CSS中更改背景？

Answer 1

编辑回复您的回复：

然后你有三个选择。

第一个选项就像你建议创建两个图像，将它们放在彼此后面并使用css来改变前图像的不透明度。此方法是页面加载时间最差的方法。

第二个选项是以这样的方式更改Photoshop中的图像，使深橙色部分透明（0％不透明度），浅橙色部分为透明白色，不透明度约为10％。在css中，将背景放在＃d66a00的图像上。悬停时，将此背景更改为蓝色。

最后一个选项是使用图像的svg（如https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg）并将其嵌入到html中（参见http://www.w3schools.com/svg/svg_inhtml.asp）所以你将整个svg代码复制到html中。然后你可以使用css操纵svg的所有部分。您可以向svg元素添加类，并使用css更改其填充＆＃39; （这是svg中的背景）

第一个回答：

如果我理解正确，你的照片是一个统一为＃d66a00颜色的矩形？

在这种情况下，您可以使用此颜色作为背景创建div，而不是使用图像。然后在悬停时，改变颜色。

<style>
    .orange-rectangle{
        background-color:#d66a00;
        width:5em;
        height:5em;
        transition:background-color 200ms;
    }
    .orange-rectangle:hover{
        background-color:blue;
    }
</style>
<div class="orange-rectangle"></div>

Answer 2

我处理这个的方法是创建两个图像并在悬停时隐藏/显示图像。

图像持有者div保存您要替换的图像 - 当它悬停在图像上时，类defaultCmage消失，并被具有类hoverImage的图像替换。

<style>
      .imageHolder .defaultImage {
           display:inherit;
      }
      .imageHolder .hoverImage{
           display:none;
      }
      .imageHolder:hover .defaultImage {
           display:inherit;
      }
      .imageHolder:hover .hoverImage{
           display:none;
      }
 </style>

 <div class = 'imageHolder'>
      <img src = 'path/to/first/image.jpg' class = 'defaultImage'>
      <img src = 'path/to/second/image.jpg' class = 'hoverImage'>
 </div>

CSS中的图片颜色叠加

2 个答案: