Question

我该如何为某些带有纹理的png文件遮罩，例如金银或...

例如，我有一个这样的图像：
the original png image
有什么方法可以使用下面的纹理：
The sample texture
通过CSS，jquery和...使它像下面的图片一样！
example for image result

我搜索了很多，但不幸的是没有看到任何可接受的结果
谢谢

已更新！

我自己找到一种方法！只是使用CSS和jquery
仅用于显示纹理和按钮的HTML代码是：

 <div class="container">
     <div class="row">
    <div class="col-md-offset-5 col-sm-11">
<img id="pic" src="img/goldtexture.jpg">
    </div>

   <div class="btn btn-group margin">
        <div class="btn-group">
    <button class="btn btn-default gold">gold</button>
        </div>
        <div class="btn-group">
    <button class="btn btn-default silver">silver</button>
        </div>
    <div class="btn-group">
        <button class="btn btn-default bronze">bronze</button>
    </div>

   </div>
  </div>
 </div>

和CSS：

 #pic{
    width: 180px;
    height: 95px;
    background:yellow;
    mask-image:url(img/pic.png);
    -webkit-mask-image:url(img/pic.png);
    margin-left: 40%;
}

和我的jquery代码：

     $(document).ready(function(){
    $('.gold').click(function(){
            $('#pic').attr('src','img/goldtexture.jpg');


        });
    $('.silver').click(function(){
        $('#pic').attr('src','img/silvertexture.jpg');

        });
        $('.bronze').click(function(){
            $('#pic').attr('src','img/bronzetexture.jpg');
        });
    });

这样，一切正常，结果没有问题，但是不幸的是，只有少数浏览器支持mask-image CSS属性...
如果有更好的方法，我会很高兴
等待你的答案

跨浏览器的遮罩图像/ -webkit-遮罩图像

0 个答案: