饼干图案喜欢

Question

刚开始关注 CSS 中的 clip 属性。

我正在为一家饼干厂开发网站，我想让它响应迅速。我的问题是我在网站上遇到了一个部分，由于响应问题，我不能只使用良好的旧 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>

饼干图案喜欢

Biscuit pattern like

css

background

png

responsive

clip