javascript - CSS中的图片颜色叠加

Question

你好，我有一张用 Photoshop 制作的照片。它只有一种颜色(html 的符号)。它由 #d66a00(橙色阴影)颜色制成。我需要在悬停时添加效果，那张图片慢慢地变成另一种颜色。

例如。我在现场有一张照片，它是橙色的。当我将鼠标移到图片上时，他会从橙色变​​为蓝色。 CSS3 或 javascript 是否可以实现类似的功能，或者我需要使用两张图片并在 CSS 中更改背景？

Answer 1

EDIT 回应您的回复:

然后你有三个选择。

第一个选项就像您建议的那样创建两个图像，将它们放在彼此的后面并使用 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 更改它们的“填充”(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>