SOURCE

<svg 
  width="300" height="150" 
  viewBox="0 0 300 150"
  xmlns='http://www.w3.org/2000/svg'
  style="background: black;filter:grayscale(1);"
>

  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch' />
  </filter>

  <rect
    width='100%' 
    height='100%' 
    filter='url(#noiseFilter)' />
</svg>

<div class="square-1"></div>

<div class="title">
    <strong>CSS新世界</strong>
</div>

<figure>
    <img src="mm9.jpg" />
</figure>

.square-1 {
    width: 200px;
    height: 200px;
    background: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60%/3000px 3000px, repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 40% 40%/2000px 3000px;
    background-blend-mode: difference;
}

.title {
    background-color: deepskyblue;
}

.title strong {
    font-size: 100px;
    color: #0000;
    background: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0/2500px 2500px, repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 50%/2500px 2500px;
    background-blend-mode: difference;
    mix-blend-mode: lighten;
    -webkit-background-clip: text;
    background-clip: text;
}

figure {
    display: inline-flex;
    position: relative;
    filter: sepia(100%);
}

figure::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(#000a, #000a), repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0 / 2500px 2500px, repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60% / 2500px 2500px;
    background-blend-mode: normal, difference;
    mix-blend-mode: overlay;
    opacity: .6;
}