Question

刚刚开始了解CSS中的.home .section-4 { background-image:url('../images/backgrounds/tales.png'); background-size:cover; }属性。

我正在一家饼干工厂的网站上工作，我想让它做出回应。我的问题是我遇到了网站的一个部分，因为响应性问题我无法使用旧的png背景。

所以，我的问题是，你如何设法在CSS中使用这种模式（剪切，可能），而不是使用png透明度。

Akram Ben Aissi published an interesting post in the Openshift blog

* {
  padding: 0;
  margin: 0;
}
div {
  border: 1px solid;
  box-sizing: border-box;
}
.home-gallery {
  position: relative;
  height: 100vh;
  width: 100%;
}
.rc-contain {
  position: absolute;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(255, 0, 0, .2);
  /* red */
}
.rc-slider {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 255, .2);
  /* blue */
}

我尝试过使用伪元素，但没有运气。

Answer 1

如果您只是在伪元素中使用radial-gradient（从透明到背景颜色），您可以获得可靠的结果。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

饼干图案就像

1 个答案: