根据 WordPress 中帖子的类别，一张图像叠加层具有多种颜色

Question

我正在使用 WordPress 构建一个作品集网站。我目前在主博客上显示我的帖子的特色图像，并且在滚动/悬停图像时有一个彩色叠加层，该叠加层根据帖子所在的类别而变化。目前我正在通过使用透明的 1x1px 图像来实现这一点我的CSS中的background url()将其大小调整为图像的大小。

我想要做的是，如果帖子属于多个类别，则颜色翻转以条纹形式显示所有不同类别的颜色。例如，如果我的类别和颜色如下...

打印作品 - 绿色

网页 - 红色

移动图像 - 紫色

...并且我有一篇文章进入“打印作品”和“网页”，悬停状态应为半绿色图像上有一半红色。如果帖子属于所有三个类别，则悬停状态应为 3 种颜色（3 条条纹 – 1 条绿色、1 条红色和 1 条紫色彼此相邻）。

我在搜索中没有找到任何关于这是否可能的线索，并且不太知道从哪里开始。这是否可以实现？如果可以，仅使用 CSS 或 Jquery 可以实现吗？

Answer 1

您可以通过设置容器 div 覆盖来实现此目的，我们将其称为 .hover_div。该 div 将保存类别的任何/所有颜色 div - 让我们称之为 .color_div。使用 foreach 循环使每个帖子的类别在 .hover_div 内创建另一个 .color_div。

使用 Jquery，用百分比设置这些 div 的宽度：

var colors = $(".color_div").length;
var color_width = 100/colors;
$(".color_div").width(color_width + "%");

这将使容器 .hover_div 中的颜色 div 大小相等。为每个 color_div 指定另一个类名以分别定位并设置颜色。

你应该已经准备好了。