Question

我试图找出如何更改半透明和半纯色图像的颜色。

我希望能够改变白色的颜色，这样我就可以添加悬停，并添加一种动态方式来改变wordpress中的颜色。使用photoshop来填充图像不是一种选择，因为我将在我的Wordpress主题中构建一个换色器。

我使用了一个名为JFlat.js的jQuery脚本，因为它看起来非常像我需要的东西。虽然它对我来说似乎根本不起作用。按照我猜测的确切步骤，因为它使用了旧版本的jQuery。

有人可以给我一些帮助吗？

这是图片上的黑色版本，你看不到白色版本，所以我会发布这个版本，以便更好地了解我所说的内容。

enter image description here

Answer 1

使用SVG icon ，此内容来自Iconic。 Icon melon也很好

否则你可以使用font-icon，这个来自FontAwesome

如果必须，您可以使用CSS Filter，但它是only supported in newer browsers。最好的后备方法是使用SVG过滤器执行相同的操作并使用数据URL来应用它。 Demo

-webkit-filter: invert(100%);

你也可以使用像agconti建议的精灵

Answer 2

对于它的价值，这也可以用svg

完成

<强> FIDDLE

查看google's online svg-editor - 我用来制作svg。（我之后添加的css类除外）

SVG

<svg class="play" width="252" height="252" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <circle class="outer" r="123.16656" cy="128" cx="128" 0 fill="#000000"/>
  <circle class="inner" r="97" cy="127" cx="128" fill="#ffffff"/>
  <path class="triangle" transform="rotate(89.2704 134.893 125.778)" id="svg_6" d="m93.75,161.77814l41.14282,-72l41.14288,72l-82.28571,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null"  fill="#000000"/>
 </g>
</svg>

CSS

.play:hover .outer, .play:hover .triangle
{
    fill: #fff;
}
.play:hover .inner
{
    fill: #000;
}

Answer 3

你可以尝试一起避免使用JQuery，只使用普通的旧css和html。代码显示了该概念，但您需要调整尺寸以使其工作。您可能会发现使用border-radius：100％更有用。然后您可以根据需要应用：悬停样式。

  <div class="outer-circle">
   <div class="inner-circle">
      <div class="triangle">
      </div>
  </div>
</div>

<style>
    .outer-circle {
        padding: 15px 0 0 15px;
        width: 150px;
        height: 150px;
        background: black;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;

    }

    .inner-circle {

        width: 135px;
        height: 135px;
        background: white;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
        border-radius: 80px;
        position:relative;
    }


    .triangle {
        width: 0;
        height: 0;
        border-top: 40px solid transparent;
        border-left: 80px solid black;
        border-bottom: 40px solid transparent;
        position: absolute;
        top:25px;
        left: 35px;
    }
</style>

如何使用CSS更改图标图像的颜色？

3 个答案:

SVG

CSS