jquery – 可以使用CSS来屏蔽背景图像吗？

这是我目前所看到的：

这是我的代码到目前为止

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

这是我的目标：

我正在寻找使用CSS创建一个面具 – 我需要什么？

解决方法

如果您在上述评论中找不到解决方案,那么我有一个.

而不是尝试创建svg或png图像以反对,您可以使用边框(如果您使用易于使用的纯色)来复制此.

You can see a working jsFiddle here

编辑

旧的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;
}

原文地址：https://www.jb51.cc/jquery/179962.html