多個背景影象

Created: November-22, 2018

在 CSS3 中，我們可以在同一個元素中堆疊多個背景。

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

影象將堆疊在一起，第一個背景在頂部，最後一個背景在背面。img_1 將位於頂部，img_2 和 img_3 位於底部。

我們也可以使用背景速記屬性：

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

我們還可以堆疊影象和漸變：

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

演示