我正在制作一个基于SoundCloud API的音乐播放器.并希望使用波形图像.但SoundCloud提供的波形并不适合我的需要.事实上,波浪是透明的,周围有白色.我想通过背景图像填充波浪并从波浪周围移除白色.

以下是SoundCloud的波形示例：http://w1.sndcdn.com/ZnIW9DSkAhPU_m.png

附图是我要找的：

我可以找到一些像使用的线索：

-webkit-mask-Box-image: url(https://w1.sndcdn.com/cWHNerOLlkUq_m.png);
background: #81D8D0;

或HTML5画布,但我无法将它们变成我想要的.还有波形.js但它只采用颜色而不是图像作为波形的颜色.

任何的想法？

我不确定是否允许使用ImageMagick解决方案,但是您可以在PHP中执行此操作,然后将其发送到您的浏览器…

第1步：让你的wave.png文件包含真(255)个白色(所以我们可以在第3步删除它们)

convert wave.png -threshold 50% PNG32:w1.png

第2步：用波浪合成你的爱因斯坦

composite w1.png einstein.jpg x.png

第3步：用透明的像素替换所有白色像素,并将resuilt保存为out.png

convert x.png -transparent white out.png

ImageMagick是免费的,功能强大且可用here.

请注意,最后两个步骤可以简化为一个步骤,如下所示：

composite w1.png einstein.jpg png:- | convert png:- -transparent white out.png

我没有太多关于几何匹配的问题;-)

我正在使用bootstrap 3,我正在创建一个侧导航栏,并希望将图像放在list标签内的锚标签内.我想在鼠标悬停时反转图像的颜色,但它没有发生.鼠标悬停没有任何影响.
如果有人能提供帮助,那将会很棒.

这是我的代码：

HTML：

<uldata-role="panelbar">
  <li>
      <a>
        <span></span>Group Name
        <span id="edit-img">
            <img src="images/glyphicons/Data-Edit.png">
        </span>
      </a>
   </li>
</ul>

CSS：

#edit-img :hover {
    -webkit-filter: invert(100%) !important;
}

我无法在鼠标悬停时反转Data-Edit.png的颜色.请帮忙.

编辑：

检查这个DEMO

它在这种情况下工作,应该在你的工作.

你必须在img标签上应用它

#edit-img:hover img{
    -webkit-filter: invert(100%) !important;
}

这是我的拥有： http://jsfiddle.net/axe3J/

当我将鼠标悬停在2-5以上时,我正试图制作边框底部滑块并从蓝色变为红色.我从来没有使用过jQuery,所以我希望只用CSS就可以了.提前致谢.

HTML：

<ul>
        <li><a href="1.html"id="current">1</a></li>
        <li><a href="2.html">2</a></li>
        <li><a href="3.html">3</a></li>
        <li><a href="4.html">4</a></li>
        <li><a href="5.html">5</a></li> 
</ul>

CSS：

li {
display: inline;
}

.button {
padding: 5px 35px 5px 35px;
background-color: transparent;
text-decoration: none;
}

.button:hover {
color: #d0332b;
border-bottom: 7px solid #d0332b;
}

#current {
border-bottom: 7px solid #09C;
color: #09C;
}

您可以使用css3过渡执行此操作.
在标记中添加span标记.

<li><a href="1.html"id="current">1 <span></a></span></li>
<li><a href="2.html">2 <span></a></span></li>

CSS

li {
    display:inline-block;
    width:150px;
    overflow:hidden;
    position:relative;
    height:20px;
}
li span.border{
    height:5px;
    width:150px;
    left:-150px;
    background:green;
    position:absolute;
     -moz-transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    bottom:0;
}
li a#current span.border{
    left:0;
    background:red;
}
li:hover span.border{
    left:0;
}

我想你明白了.请根据需要更改css.谢谢.