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

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

既然容器有一个 position: fixed，我怎样才能让 repeat-x 在 wave 上工作？我想在容器 div 的顶部显示背景图像。

Answer 1

您的伪元素需要 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 */
}