我正在寻找一种方法来创建一个相对大小的方形div,比如说70%x 70%的背景颜色和一个圆孔(这样可以看到背后的背景)相同尺寸这样div的两边都是相切的。
答案 0 :(得分:8)
您可以使用radial-gradient
来实现此目标。
html,
body {
height: 100%;
margin: 0;
background: url(http://www.lorempixel.com/600/400) 100% 100%;
}
div {
position: relative;
width: 70%;
height: 70%;
background: -webkit-radial-gradient(50% 50%, circle, transparent 10%, #000 10%);
background: -moz-radial-gradient(50% 50%, circle, transparent 10%, #000 10%);
background: radial-gradient(50% 50%, circle, transparent 10%, #000 10%);
margin: 0 auto;
}

<div></div>
&#13;
这是svg
方法。
body {
background: url(http://www.lorempixel.com/600/400/);
background-size: 100% 100%;
margin: 0;
}
&#13;
<svg viewBox="0 0 400 200" width="400" height="200">
<path d="M0,0 L400,0 L400,200 L0,200z M200,100 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0z" fill="black" />
</svg>
&#13;