<div>中的圆孔

Question

我正在寻找一种方法来创建一个相对大小的方形div,比如70%x 70%的背景颜色和一个圆形洞(这样可以在它后面看到背景)相同的大小,以便div的两边是相切的.

Answer 1

你可以用它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>

这是一种svg方法.

body {
  background: url(http://www.lorempixel.com/600/400/);
  background-size: 100% 100%;
  margin: 0;
}

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