css3响应式背景 |bootstrap引入css以后

CSS3是现代web设计中最重要的技术之一，其中一些新增的特性正是帮助大家实现响应式设计的。其中之一就是响应式背景。

body {
background-image:url(images/background.jpg);
background-size:cover;
background-repeat:no-repeat;
}
@media (max-width: 600px) {
body {
background-image:url(images/background_mobile.jpg);
}
}

在上面的代码中，大家先定义了一个body的背景图片，并指定其覆盖整个背景并不重复。然后大家使用@media查询，当屏幕宽度小于600px时，会自动切换到手机版的背景图片background_mobile.jpg。这样做可以避免在小屏幕设备上加载过大的图片，提升页面性能。

除了使用不同的背景图片，大家还可以使用CSS3的渐变效果来实现响应式背景。例如下面的代码：

body {
background: linear-gradient(to bottom, #FFFFFF, #EAEAEA);
}
@media (max-width: 600px) {
body {
background: linear-gradient(to bottom, #FFFFFF, #D3D3D3);
}
}

这里大家使用了CSS3的线性渐变。当屏幕宽度小于600px时，背景颜色会自动变成深灰色，以适应不同的屏幕设备。

总之，响应式背景是一种很有用的技术，它可以使网站或应用更加适应各种不同的屏幕设备。大家可以借助CSS3的强大特性来实现响应式背景，让用户体验更加流畅，提升网站或应用的性能。