这是我目前拥有的:
到目前为止,这是我的代码:
<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 创建一个 mask - 我需要做什么?
最佳答案
如果您在上面的评论中找不到解决方案,那么我为您准备了一个。
与其尝试创建 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;
}
关于jquery - CSS 可以用来遮盖背景图片吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11383922/