css - 如何在元素上打洞以查看下面的背景图像？

Question

我想通过在其 Angular 落附近“钻孔”来使元素看起来像一 block 牌匾，以便背景图像在后面可见。

该元素是响应式的，因此它可以是纵向、方形或横向，但随着其形状的调整，其 Angular 上的孔需要保持圆形。不过，孔的大小应该具有响应性 - 最好与 vmin 成比例。

这个片段是我的起点。

body {
  margin: 0;
  background-image: url(http://picsum.photos/id/167/1000);
  background-size: cover;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
  font-size: 7vmin;
}

.d1 {
  background-color: goldenrod;
  color: white;
  width: 60vw;
  height: 60vh;
  border-radius: 4vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

<div class="d1">Roses are red,<br>violets are blue.</div>

我知道我可以使用 SVG 背景图像或 SVG 蒙版来接近，但是这些解决方案都不允许孔保持圆形。

body {
  margin: 0;
  background-image: url(http://picsum.photos/id/167/1000);
  background-size: cover;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: cursive;
  font-size: 7vmin;
}

.d1 {
  background-color: goldenrod;
  color: white;
  width: 60vw;
  height: 60vh;
  border-radius: 4vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle cx="15" cy="15" r="5"/><circle cx="185" cy="15" r="5"/><circle cx="15" cy="185" r="5"/><circle cx="185" cy="185" r="5"/></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
  -webkit-mask-composite: destination-out;

  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle cx="15" cy="15" r="5"/><circle cx="185" cy="15" r="5"/><circle cx="15" cy="185" r="5"/><circle cx="185" cy="185" r="5"/></svg>') 0/100% 100%, linear-gradient(#fff,#fff);
  mask-composite: exclude;
}

<div class="d1">Roses are red,<br>violets are blue.</div>

Answer 1

使用径向渐变着色。无需口罩

body {
  margin: 0;
  background-image: url(http://picsum.photos/id/167/1000);
  background-size: cover;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.d1 {
  --r: 2vmin; /* radius */
  color: white;
  width: 60vw;
  height: 60vh;
  border-radius: calc(2*var(--r));
  border: var(--r) solid goldenrod; /* the outer space*/
  background: 
   radial-gradient(var(--r) at var(--r) var(--r),#0000 98%,goldenrod)
   0 0/calc(100% - 2*var(--r)) calc(100% - 2*var(--r));
  
  box-sizing: border-box;
}

<div class="d1"></div>