使用蒙版创建“禁用”外观

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 Fiddle demo

请记住，条纹png中没有透明度（到imgur hosted image is concerned, anyway为止，所以我使用的是opacity）。 JS Fiddle演示也比必要的复杂一点，所以我可以显示禁用/启用状态。

Answer 2

我构建了一个示例here。 我怀疑这个位置：绝对方法是解决这个问题的最佳方法，因为你需要知道图像的大小。

Answer 3

请考虑这个简单的片段。非常通用的解决方行为和感觉非常像'禁用＆＃39;输入元素的属性。请参阅代码段

＆＃13;

＆＃13;

function disable(elementId, enabling) {

  el = document.getElementById(elementId);


  if (enabling) {
    el.classList.remove("masked");
  } else

  {
    el.classList.add("masked");
  }
}

＆＃13;

.masked {
  position: relative;
  pointer-events: none;
  display: inline-block;
  //visibility:hidden; /* Uncomment this for complete disabling  */
}
.masked::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  visibility: visible;
  opacity: 0.5;
  background-color: black;
  //background: url('http://i.imgur.com/lCTVr.png'); /* Uncomment this  to use the image */
  content: "";
}

＆＃13;

<button onclick="alert('Now, click \'OK\' then \'Tab\' key to focus next button.\nThen click \'Enter\' to activate it.');">Test</button>
<div id="div1" style="display:inline-block" class="masked">
  <button onclick="alert('Sample button was clicked.')">Maskakable</button>
  <button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
  <br/>
  <button onclick="alert('Sample button was clicked.')">Maskakable</button>
  <button onclick="alert('Sample button was clicked.')">Maskakable</button><br/>
  <img src="http://i.stack.imgur.com/WpgNy.jpg">
</div>
<button>Dummy</button>

<br/>
<button id="enableBtn" onclick="disable('div1',true);disable('enableBtn',false);disable('disableBtn',true);">Enable</button>
<button id="disableBtn" onclick="disable('div1',false);disable('enableBtn',true);disable('disableBtn',false);"  class="masked">Disable</button>

＆＃13;

＆＃13;

＆＃13;

Answer 4

要通过z-index进行操作，您的两个图像都应该位于带有img标记的容器中。