如何在固定位置容器的顶部添加图像？

Question

我想在我的网页底部创建一个以下形状的通知栏（粘性）。

这是我的HTML

   <div class="notice-container">
      <div class="wave"></div>
      <div>
        <p>Content here</p>
      </div>
   </div>

这是我的CSS，我尝试了几件事，但这是最新的：

        .notice-container {
          display: block;
          height: auto;
          background-color: #ccc;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
        }
        .wave:after {
          content: "";
          background-image: url('../wave.png');
          background-repeat: repeat-x;
          position: absolute;
          top: 0;
          margin: -30px;
          width: 100%;
          height: auto;
        }

由于容器的位置已固定，如何在wave上进行repeat-x工作？我想在容器div的顶部显示背景图像。

Answer 1

将您的网址和正义放在background-size中。另外，不要忘记更改所需的伪元素高度，这也需要配置margin-top和top

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

footer {
  width: 100%;
  height: 70px;
  border: 5px solid red;
  border-top: 0;
  margin-top: 20px;
  position: relative;
}
footer:after {
  width: 100%;
  display: block;
  content: '';
  height: 20px;
  position: absolute;
  left: 0;
  top:-20px;
  background-image: url(https://i.stack.imgur.com/z4HMY.png);
  background-size: 10% 20px;
}

＆＃13;

<footer></footer>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的伪元素需要display: block;以及指定的height属性。由于值auto只是告诉它扩展以适应其内容（并且没有），因此height值将保持为0。

.wave:after {
  content: "";
  display: block; /* <- Add this */
  background-image: url('../wave.png');
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  margin: -30px;
  width: 100%;
  height: 60px; /* Or whatever your wave.png requires */
}