Question

我知道如何通过使用图像来实现它，但它需要动态变化。使用颜色代替图像有什么技巧吗？关于使用webkit掩码的文档似乎很少。

我在Chrome扩展程序中使用此功能可以脱机使用（即我不能使用PHP）。

Answer 1

您可以使用带有彩色背景的伪元素，例如http://www.impressivewebs.com/image-tint-blend-css/

中的示例

HTML

<figure class="tint">
  <img src="image.jpg" alt="Example" width="400" height="260">
</figure>

CSS

.tint {
    position: relative;
    float: left;
    cursor: pointer;
}

.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,255,255, 0.5);
    -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
    -ms-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}

.tint:hover:before {
    background: none;
}

在PNG上使用webkit掩码的颜色

1 个答案: