主页 / coding / 问题 / 77491404
Accepted
Brett Donald
Asked: 2023-11-16 07:06:55 +0800 CST

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

  • 772

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

角上有孔的圆角正方形

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

css

1 个回答

  1. Best Answer

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

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

    • 5

相关问题