使用蒙版创建"禁用"外观

Question

我正在尝试创建以下内容:

使用两个图像:一个作为遮罩(对角线),另一个作为图像和文本本身(遮罩和图像+文本大小相同):

..而我无法完成它!

我已经尝试了所有与div和z-indeces,不透明度和背景图像的组合..(应该提到我是hob的noob).

这是我拍摄的一个镜头(只有面具和图像):

div {
    position: absolute;
    top: 775px;
    left: 0px;
    height: 188px;
    width: 272px;
    background-image: url('grey-out.png');
}

img {
    z-index: 1000; 
}

---

<div></div>
<img src="41_large.png" />

这只是给对角线本身..
有人可以帮帮我吗？如何将"半透明"蒙版和div组合在一起"禁用"？

谢谢!

Answer 1

这种方法有效:

<div id="pspThing" class="disabled">
    <img class="disabled" src="http://i.stack.imgur.com/lCTVr.png" />
</div>

#pspThing {
    background: transparent url(http://i.stack.imgur.com/WpgNy.jpg) 0 0 no-repeat;
    height: 93px;
    width: 273px;
    border: 1px solid #000;
    margin: 0 auto;
    overflow: hidden;
}
#pspThing img {
    display: none;
    opacity: 0.5;
}
#pspThing img.disabled {
    display: block;
}

JS小提琴演示

请记住,你的条纹png没有透明度(至于imgur托管图像,无论如何,所以我正在使用opacity).JS Fiddle演示也比必要的复杂一点,所以我可以显示禁用/启用状态.