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元素放在最前面,以覆盖背景图片。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。