Question

我看到有很多方法可以在webkit浏览器中执行此操作，但我看不到在其他浏览器中执行此操作的方法。这只是一个尚未在所有浏览器中实现的功能吗？

我没有标准图片，因此剪辑不起作用。我可能必须提前渲染所有内容，这会使我的工作呈指数级增长，但是你会处理你拥有的东西，对吗？

我也希望能够从javascript激活这些东西。：/

感谢您提供支持。

Answer 1

刚刚离开我的头脑 - 并且没有实际问题来帮助我们解决 - 这是实现你想要的一种可能的方法......

<强> HTML

<div class="myImage">

    <img src="path_to_image" title="Lorem ipsum" alt="Dolar sit amet" />    

    <div class="myMask">
    </div><!-- /myMask -->

</div><!-- /myImage -->

<强> CSS

.myImage {
    position: relative;
}

.myMask {
    position:absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: url('path_to_masking_image');
}

或者，在<img /> div中使用myMask，然后从CSS中删除background-image属性。

目前布局的方式，你需要两个图像：图像本身的所有荣耀和面具。

实现“遮蔽效果”的方法是让遮罩图像为静态纯色，与容器的背景相匹配 - 即白色，黑色等等。

Kapeesh？这适用于所有浏览器，这是您要求的。 background-clip属性具有-webkit和-moz选择器，但在IE或（据我所知）Opera等浏览器中不受支持。

Answer 2

这是我的2美分，如果它确实是你想要的CSS Sprites。

<head>
<style type="text/css"><!--
#imagemask {
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-color: transparent;
    height: 40px;
    width: 40px;
}
.mask1 { background-position: top left; }
.mask2 { background-position: 0 40px; }
.mask3 { background-position: 0 80px; }/* And so on, however your image file is 'layed out' */
--></style>
<script type="text/javascript">
    function mask1(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
    function mask2(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
    function mask3(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
</script>
</head>

<body>
    <a href="#" onclick="javascript:mask1()">mask 1</a>
    <a href="#" onclick="javascript:mask2()">mask 2</a>
    <a href="#" onclick="javascript:mask3()">mask 3</a>
    <div id="imagemask" class="mask1"></div>
</body>

我们将div #imagemask定义为包含1个图像文件作为背景，并将其设置为不重复，因为这样可能无视这一点。
我们定义如何“移动”具有固定宽度和高度的“mask”（div）内的图像。
作为参考，我已经添加了你需要在动态掩码之间切换的javascript。我写了大约10秒钟，如果你愿意，你可能会写一些更优雅的东西。
使用onclick = events
最后，将div＃imagemask添加到正文中。

鉴于我不知道您的图像文件的宽度或高度或它的目标屏蔽，您将不得不对此代码进行一些实质性的编辑。但你明白了这一点：）

Answer 3

我只是跳过CSS变体而赞成这个：

工作面具示例：http://gumonshoe.net/NewCard/MaskTest.html

我从另一个网站教程获得了一个javascript类： http://gumonshoe.net/js/canvasMask.js

它读取图像数据并将掩模中的alpha像素应用于目标图像：

function applyCanvasMask(image, mask, width, height, asBase64) {
    // check we have Canvas, and return the unmasked image if not
    if (!document.createElement('canvas').getContext) return image;

    var bufferCanvas = document.createElement('canvas'),
        buffer = bufferCanvas.getContext('2d'),
        outputCanvas = document.createElement('canvas'),
        output = outputCanvas.getContext('2d'),

        contents = null,
        imageData = null,
        alphaData = null;

    // set sizes to ensure all pixels are drawn to Canvas
    bufferCanvas.width = width;
    bufferCanvas.height = height * 2;
    outputCanvas.width = width;
    outputCanvas.height = height;

    // draw the base image
    buffer.drawImage(image, 0, 0);

    // draw the mask directly below
    buffer.drawImage(mask, 0, height);

    // grab the pixel data for base image
    contents = buffer.getImageData(0, 0, width, height);

    // store pixel data array seperately so we can manipulate
    imageData = contents.data;

    // store mask data
    alphaData = buffer.getImageData(0, height, width, height).data;

    // loop through alpha mask and apply alpha values to base image
    for (var i = 3, len = imageData.length; i < len; i = i + 4) {
        imageData[i] = alphaData[i];
    }

    // return the pixel data with alpha values applied
    if (asBase64) {
        output.clearRect(0, 0, width, height);
        output.putImageData(contents, 0, 0);

        return outputCanvas.toDataURL();
    }
    else {
        return contents;    
    }
}

跨浏览器创建掩码

3 个答案: