避免使用 css 掩码屏蔽的链接上的命中区域

【问题标题】：Avoid hit area on link masked with css mask避免使用 css 掩码屏蔽的链接上的命中区域
【发布时间】：2015-07-19 09:19:43
【问题描述】：

我有一千个使用 css3 的 mask 属性被 png 图像屏蔽的文本链接，我想从被 png mask 隐藏的链接中删除命中， 下面是两张图片，第一张是没有遮罩的链接，第二张是带有png图像的遮罩链接，我的问题是所有链接的点击区域都处于活动状态，包括带有遮罩的隐藏链接，有办法存档吗？ 

.container {
  -webkit-mask: url(../images/mask.png) top left;
  mask: url(../images/mask.png);
}


.tweets {
  width: 400px;
  height: 400px;
  -webkit-mask: url("http://asesoriait.net/images/mask.png") top left;
  mask: url("http://asesoriait.net/images/mask.png") top left;

}
<div class="tweets masonry js-masonry hidden" id="tweets">	
  <a class="txtExtra" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>							
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>							
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>			
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>							
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>						
				<a class="txtExtra tooltipstered" href="#">@</a>				
				<a class="txtSmall tooltipstered" href="#">@</a>					
				<a class="txtExtra tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>		
				<a class="txtExtra tooltipstered" href="#">@</a>							
				<a class="txtSmall tooltipstered" href="#">@</a>
				<a class="txtBig tooltipstered" href="#">@</a>
  </div>

【问题讨论】：

  • 没有看到代码（或者至少是一个小演示）是不可能提供建议的。
  • 你不能只在容器上使用border-radius和overflow:hidden;来剪辑链接吗？
  • 我需要最低限度的演示...不是指向我将来无法使用的活动页面的链接。
  • @web-tiki 这只是一个简单的演示，蒙版的图像真的很不规则，不是圆形
  • @xzegga 好的，我明白了，请插入一个最小的代码示例来重现您的问题，如 Paulie_D 所说，以便我们提供帮助。

标签： css svg mask masking


【解决方案1】：

CSS 遮罩仍然是一项实验性功能。我不知道如何解决您的问题，只能提供解决方法。获得所需结果的一种可能方法是使用带有 clipPath element 的 svg 来剪辑您的链接。

例子：

svg{
    width:90%;
    border:1px solid red;
}
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 50">
    <defs>
        <clipPath id="clip">
            <path d="M50 10 C80 80 80 80 50 50 C 10 10 10 10 50 0z"/>
        </clipPath>
    </defs>
    <g clip-path="url(#clip)" font-size="20">        
        <a xlink:href="#"><text x="0" y="5">@</text></a>
        <a xlink:href="#"><text x="20" y="5">@</text></a>
        <a xlink:href="#"><text x="40" y="5">@</text></a>
        <a xlink:href="#"><text x="60" y="5">@</text></a>
        <a xlink:href="#"><text x="80" y="5">@</text></a>
        <a xlink:href="#"><text x="0" y="25">@</text></a>
        <a xlink:href="#"><text x="20" y="25">@</text></a>
        <a xlink:href="#"><text x="40" y="25">@</text></a>
        <a xlink:href="#"><text x="60" y="25">@</text></a>
        <a xlink:href="#"><text x="80" y="25">@</text></a>
    </g>
</svg>

【讨论】：

  • 如何在 svg 中的所有 @ 上应用 masonry.js？如果您看到示例，@ 是带有 masonry.js 的随机放置器。
  • 我不知道@xzegga 我不熟悉masonty.js
  • 我在我的实际代码中放置'@'和砖石，砖石它是一个级联网格布局库masonry.desandro.com我想使用你的解决方案，但是用砖石随机放置'@'而不是 x 或每个 a 元素上的 y 坐标。
  • @xzegga 我知道它是什么，但我对它不够熟悉，不知道你是否可以在这种布局中使用它。
【解决方案2】：

有一种方法可以用clip-path“屏蔽”，问题是目前还没有很好的支持。 More here.

.tweets {
  width: 400px;
  height: 400px;
  -webkit-clip-path: circle(20.0% at 50% 50%);
  clip-path: circle(20.0% at 50% 50%);
}
<div class="tweets masonry js-masonry hidden" id="tweets"> <a class="txtExtra" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	
  <a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	
  <a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>
  <a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	
  <a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>		<a class="txtSmall tooltipstered" href="#">@</a>		<a class="txtExtra tooltipstered" href="#">@</a>
  <a class="txtBig tooltipstered" href="#">@</a>	

</div>

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-20
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode