css - cookies 图案喜欢

Question

刚刚开始了解 CSS 中的 clip 属性。

我正在为一家 cookies 厂开发网站，我想让它响应迅速。我的问题是我遇到了网站的一个部分，由于响应问题，我不能只使用良好的旧 png 背景。

所以，我的问题是，如何在 CSS 中而不是通过使用 png 透明度来实现这种模式(可能是剪裁)。

.home .section-4 { 
        background-image:url('../images/backgrounds/tales.png'); 
        background-size:cover; 
}

我试过使用伪元素，但没有成功。

Answer 1

如果您在伪元素中简单地使用radial-gradient(从透明到任何背景颜色)，您可以获得可靠的结果。

.wave{
  height: 60px;
  position: relative;
  background-image:url('http://placehold.it/350x60'); 
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image:
    radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}

<div class='wave'></div>