如何通过CSS隐藏矩形和掩码中的半圆？ [英] How to mask semi circles inside a rectangle and mask through css?

问题描述

我有一个背景图片和一个矩形在css上面。我需要的是，两个半圆应该掩盖通过这个矩形和背景图像应该看到通过这个矩形，如图所示。

>

解决方案

您可以这样做

HTML：

 < div id =wrapper> 
< div id =rect>< / div> 
< div id =a> 
< / div> 
< div id =b> 
< / div> 
< / div> 
   

CSS ：

  #wrapper {
 position：relative; 
 width：312px; 
 height：313px; 
 background：url（http://i.stack.imgur.com/pZVTb.png）; 
 background-attachment：fixed; 
} 
 #a {
 position：absolute; 
 right：0; 
 height：120px; 
 top：100px; 
 border-top-left-radius：60px; 
 border-bottom-left-radius：60px; 
 width：60px; 
 background：url（http://i.stack.imgur.com/pZVTb.png）; 
 background-attachment：fixed;} 
 #b {
 position：absolute; 
 left：0; 
 height：120px; 
 top：100px; 
 border-top-right-radius：60px; 
 border-bottom-right-radius：60px; 
 width：60px; 
 background：url（http://i.stack.imgur.com/pZVTb.png）; 
 background-attachment：fixed; 
} 
 #rect {
 width：100％; 
 height：56％; 
 position：absolute; 
 top：65px; 
 background：rgba（120,0,23，.8）; 
} 
  

I have a background image and a rectangle made in css above it. What i need is, two semi circles should mask through this rectangle and background image should be seen through this rectangle as shown in the image.

解决方案

You can do it like this

HTML:

<div id="wrapper">
    <div id="rect"></div>
    <div id="a">    
    </div>  
    <div id="b">
    </div>
</div>

CSS:

#wrapper{
    position:relative;
    width:312px;
    height:313px;
    background:url(http://i.stack.imgur.com/pZVTb.png);
    background-attachment: fixed;
}
#a{
    position:absolute;
    right:0;
    height:120px;
    top:100px;
    border-top-left-radius:60px;
    border-bottom-left-radius:60px;
    width:60px;
    background:url(http://i.stack.imgur.com/pZVTb.png);
    background-attachment: fixed;}
#b{
    position:absolute;
    left:0;
    height:120px;
    top:100px;
    border-top-right-radius:60px;
    border-bottom-right-radius:60px;
    width:60px;
    background:url(http://i.stack.imgur.com/pZVTb.png);
    background-attachment: fixed;
} 
#rect{
    width:100%;
    height:56%;
    position:absolute;
    top:65px;
    background:rgba(120,0,23,.8);
}

FIDDLE

Output:

Change the color and image as you want.!!!!

Also check this : http://stackoverflow.com/a/17751125/1542290

这篇关于如何通过CSS隐藏矩形和掩码中的半圆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！