css 一个div写两个背景图片

CSS是网页设计中必不可少的一部分，它可以让页面变得更加美观、易读、易用。在CSS中，有个很实用的技巧就是在一个div容器中使用两个背景图片。下面让我们一起来学习如何实现这一效果。

  .background {
    background-image: url('image1.jpg'),url('image2.jpg');
    background-repeat: no-repeat,repeat;
    background-position: center,top left;
    background-size: cover,auto;
  }

如上所示，我们使用background-image属性来指定两张图片。这里第一张图片是'background-image: url('image1.jpg')'，第二张图片是'background-image: url('image2.jpg')'，它们之间用逗号隔开。

接下来是background-repeat属性。第一张图片我们使用'background-repeat: no-repeat'，而第二张图片则是'background-repeat: repeat'。这意味着第一张图片不会重复，而第二张图片会在容器中水平和垂直方向重复显示。

background-position属性用于控制图片的位置，我们在这里使用'background-position: center'来让第一张图片居中显示，而第二张图片则是'background-position: top left'，让它在容器的左上角显示。

最后，我们使用background-size属性来指定图片的大小。第一张图片我们使用'background-size: cover'，确保它完全覆盖容器，并保持比例。而第二张图片的宽度和高度我们使用'background-size: auto'，让它们适应容器的大小。

最终的效果非常漂亮：一个div容器中同时展示两张背景图片，极大地丰富了网页的视觉效果。