CSS 多个背景图片

示例

在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%);

}

  • 演示版

以上是 CSS 多个背景图片 的全部内容, 来源链接: utcz.com/z/345216.html

回到顶部