html - 如何在 wordpress 图像/主页上添加颜色叠加层 - 或者不透明度下降？ (悬停前)

Question

我如何添加颜色叠加层或不透明度将图像放在 wordpress 主页上 - 它们在悬停时有颜色叠加层 - 但我希望它们的图片颜色更深，因为我正在尝试一个黑暗的主题。

正如您在左侧看到的那样 - 我在 photoshop 中将其调低了一点，而右侧图像是它们通常的样子。

有没有一种方法可以做到这一点，而不是在上传之前通过 photoshop 对每张图片进行淡化处理？

Answer 1

您可以将图像包裹在具有相同大小的容器中并更改图像的不透明度，而包裹器具有深色背景色。在 IE8 中可能有问题。

div {
    width: 400px;
    height: 200px;
    background-color: #1b1b1b;
}
img {
    opacity: 0.5;
    transition: opacity 0.25s;
}

img:hover {
    opacity: 1;
}

<div>
    <img src="http://lorempixel.com/400/200/" alt="img"/>
</div>