創建通過使用掩模

我想要一個「禁用」的外觀創建以下文件：創建通過使用掩模

alt text

使用兩個圖像：一個爲掩膜（對角線）和其他的圖片和文字本身（面具和圖像+文字的大小相同）：

alt text

..和我只是不能把它做！

我試過所有與div和z-indeces，不透明度和背景圖像組合（應該提到我是noob html）。

這裏有一個鏡頭我在它得到了（只有面具和圖像）：

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結合？

謝謝！

來源

2010-12-05 Oren A

是不是有了更好的可讀性（我們誰試圖幫助你）當您使用CSS規則，而不是樣式屬性？ – 2010-12-05 13:26:54

@ŠimeVidas：我第一次問一個html問題，第一次我寫html ...對不起..並感謝您的編輯。 – 2010-12-05 13:30:23

這種方法的工作原理：

<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演示比必要更復雜一點，所以我可以顯示禁用/啓用狀態。

來源

2010-12-05 13:40:08

爲了通過z-index來做到這一點，您的兩張圖片應該放在帶有img標籤的容器中。

來源

2010-12-05 13:26:40 XMen

我建了一個例子here。我懷疑這個位置：絕對方法是處理這個問題的最好方法，因爲你需要知道圖像的大小。

來源

2010-12-05 13:40:19 K4emic

Pleass考慮這個簡單的片段。很普遍的解決方案行爲和感覺非常像輸入元素的「禁用」屬性。看到的片段

function disable(elementId, enabling) { 
 

 
    el = document.getElementById(elementId); 
 

 

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

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

.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: ""; 
 
}

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

來源

2015-07-12 13:30:29

創建通過使用掩模

回答

相關問題