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',让它们适应容器的大小。