您可以使用CSS媒体查询来实现响应式背景图像。下面是一些示例代码:
/* 设置默认背景图像 */
.my-element {
background-image: url('example.jpg');
}
/* 在小屏幕上更改背景图像 */
@media only screen and (max-width: 600px) {
.my-element {
background-image: url('example-small.jpg');
}
}
/* 在大屏幕上更改背景图像 */
@media only screen and (min-width: 1200px) {
.my-element {
background-image: url('example-large.jpg');
}
}
在上面的示例中,我们使用 background-image
属性设置默认背景图像。然后,使用媒体查询来更改背景图像,以便在小屏幕和大屏幕上呈现不同的图像。您可以根据需要添加更多的媒体查询。
请注意,这些媒体查询是根据屏幕宽度来定义的。您可以使用其他媒体查询条件,例如屏幕高度、设备方向等。