CSS有丰富的样式属性可以让我们对图片进行各种处理,当我们想要用一张图片填充另一张图片时,可以使用background-image这个属性来实现。以下是示例代码:
.container { width: 500px; height: 500px; background-image: url('background.jpg'); background-size: cover; position: relative; overflow: hidden; } .image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('image.jpg'); background-size: cover; }
以上代码中,我们创建了一个名为container的div,并将背景图设置为background.jpg。我们还设置了background-size为cover,这样可以保证背景图片能够自动适应container的宽高比例。我们还设置了position为relative和overflow为hidden,以确保.container的子元素.image不会超出容器。
接下来我们创建了一个名为image的div,将其内容设置为图片image.jpg,并设置其background-size为cover。我们还设置了position为absolute,top和left为0,这样我们可以将image元素放在最前面,以覆盖背景图片。