/* 通过css设置两张背景图 */ body { background-image: url('image-1.jpg'), url('image-2.jpg'); background-position: left top, right bottom; background-repeat: no-repeat, no-repeat; }
上述代码中,大家使用了background-image来设置两张不同的背景图,其中第一张图片在最上层,第二张图片在第一张图片下面。通过background-position来分别设置了两张图片的位置,而background-repeat则控制图片是否重复。在这里,大家设置为不重复,以达到更加自然的效果。
在使用两张背景图片时,还可以通过其他的方式来实现不同的效果。例如,在hover时切换图片、图片的混合等等。总之,CSS提供了许多方法来实现背景图片的设计和展示,只需灵活运用,就可以实现独特的效果。