为整个页面分配一个图案，但只在某些形状上显示它，其余的应该是黑色的

Question

我想创建一个背景为纯黑色的网页，但我还需要添加一个背景图案，该图案应仅在某些形状内可见（在这个简单示例中为圆圈，但它们将是一条复杂的路径, 每个部分不同)。

我知道我可以将图案分配给形状，但我还需要为形状设置动画，但无法为图案设置动画。

Here我的起始码

我将 CSS 中的纹理应用于整个页面并添加了一些圆圈。现在我需要在形状内部以外的任何地方“隐藏”纹理。并且页面背景应该是黑色的。我该怎么做？

Answer 1

body {
    background-color: black;    
}
.container {
    opacity: 0.8;
        background-image: linear-gradient(135deg, black 25%, transparent 25%), linear-gradient(225deg, black 25%, transparent 25%), linear-gradient(45deg, black 25%, transparent 25%), linear-gradient(315deg, black 25%, #e5e5f7 25%);
        background-position: 10px 0, 10px 0, 0 0, 0 0;
        background-size: 10px 10px;
        background-repeat: repeat;
        width:200px;
        height:200px;
}

<div class="container" style='clip-path: url("#test");'></div>
    
<svg x="0" y="0" width="0" height="0">
    <clipPath id="test">
    <circle cx="100" cy="100" r="20" fill="red"></circle>
    </clipPath>
</svg>

Answer 2

这就是你想要的吗？

/* hide the SVG */
svg#pattern {
  position: absolute;
  left: -9999px;
}


body {
  background-color: black;
  height: 2000px;
  color: white;
}

section {
  height: 400px;
}

circle {
  animation: throb 1s infinite;
}

@keyframes throb {
  0% { r: 48px; }
  50% { r: 30px; }
  100% { r: 48px; }
}

<svg id="pattern">
  <defs>
    <pattern id="check" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="linen"/>
      <rect width="5" height="5" fill="black"/>
      <rect x="5" y="5" width="5" height="5" fill="black"/>
    </pattern>
  </defs>
</svg>


<div>
  <h1>Test page</h1>

  <section>
    <svg width="400" height="100">
      <circle cx="50" cy="50" r="48" fill="url(#check)"/>
    </svg>
  </section>

  <section>
    <svg width="400" height="100">
      <circle cx="50" cy="50" r="48" fill="url(#check)"/>
    </svg>
  </section>

  <section>
    <svg width="400" height="100">
      <circle cx="50" cy="50" r="48" fill="url(#check)"/>
    </svg>
  </section>
      
</div>

为整个页面分配一个图案，但只在某些形状上显示它，其余的应该是黑色的

Assign a pattern to the whole page but reveal it only on some shapes, the rest should be black

css

svg

textures

mask