CSS可以用來掩蓋背景圖片嗎？

Image of current code

這裏是我到目前爲止的代碼：

<style type="text/css"> 
    .main 
    { 
     background:url(bg.jpg); 
     height:250px; 
     } 
    .ban 
    { 
     background-color:#333; 
     height:150px; 
    } 
    .mask 
    { 
     width:75px; 
     height:75px; 
     float:left; 
     border:#fff solid 1px; 

     margin:20px; 
    } 
</style> 

<div class="main"> 
    <div class="ban"> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div>  
    </div> 
</div>

這裏就是我的目標爲：

enter image description here

我要找使用CSS創建一個蒙版 - 我需要什麼？

來源

2012-07-08 mcxxx

所以，你希望它是像第一圖像或第二圖像？ – Ohgodwhy 2012-07-08 14:35:48

是的，我想成爲第二張圖片 – mcxxx 2012-07-08 14:39:59

我不確定你可以用CSS做到這一點 - 內部的div沒有背景色，所以它們只是呈現在父母身上，這是深灰色的。但是，根據您的使用情況，可能還有其他方法來執行此操作 - 例如，SVG可以運行。（+1，因爲我之前沒有想過用CSS來做這件事）。 – halfer 2012-07-08 14:41:37

如果您在上面的評論中找不到解決方案，那麼我爲您準備了一個解決方案。

而不是嘗試創建svg或png圖像來定位，您可以使用邊框（如果您使用易於使用的純色）來複制此邊框。

You can see a working jsFiddle here

編輯

老的jsfiddle消亡，爲了重建，需要的代碼隨行。下面提供的是使這一切工作的'面具'元素。

.mask 
{ 
    width:50px; //non-essential 
    height:50px; //non-essential 
    float:left; //non-essential 
    background:transparent; 
    border:1px solid #333; 
    border-top:20px solid #333; 
    border-left:10px solid #333; 
    border-right:10px solid #333; 
    border-bottom:50px solid #333; 
}

來源

2012-07-08 14:56:55 Ohgodwhy

使用類似的標記，以自己的A液：

http://jsfiddle.net/VtCvx/

<div class="main"> 

     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div> 
     <div class="mask"></div>  
     <div class="ban"></div> 
</div> 

.main 
{ 
    background:url(http://lorempixel.com/800/800/); 
    height:250px; 
    } 
.ban 
{ 
    height:150px; 
    position: absolute; 
    right: 0; 
    left: 550px; 
    background: #333; 
} 


.mask 
{ 
    width:75px; 
    height:75px; 
    float:left; 
    border: #333 solid 25px; 
    border-right-width: 10px; 
    border-bottom-width: 50px; 
    box-shadow: inset 0 0 1px 1px #fff;  
}

來源

2012-07-08 15:07:25 Duopixel

CSS可以用來掩蓋背景圖片嗎？

回答

相關問題