Можно ли использовать 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 - что мне нужно для этого?

Ответы

Ответ 1

Если вы не нашли решение в комментариях выше, то у меня есть один для вас.

Вместо того, чтобы пытаться создать изображение svg или png, вы можете использовать границы (если вы используете сплошной цвет, с которым легко работать), чтобы воспроизвести это.

Здесь вы можете увидеть рабочий jsFiddle

Edit

Старый jsFiddle вымер, и для воссоздания требуется сопроводительный код. Ниже представлен элемент "mask", который заставляет все это работать.

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

Ответ 2

Решение, использующее разметку, аналогичную вашему:

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;    
}​