css实现换背景 |css3 按钮翻转

body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: cover;
}

在CSS中，大家可以使用background-image属性来指定背景图片的路径，然后使用background-repeat属性来控制背景图片是否平铺，使用background-size属性来设置背景图片的大小。在上面的代码中，大家将背景图片的路径设置为background.jpg，然后将背景图片进行了不平铺，并使用cover属性将背景图片完全覆盖了整个页面。

如果大家想让背景图片随着鼠标滚动而移动，那么大家可以使用background-attachment属性，并将其设置为fixed，代码如下：

body {
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

在上面的代码中，大家将background-attachment属性设置为fixed，这意味着背景图片会固定在页面上，不会随着鼠标滚动而移动。

另外，大家还可以使用CSS的动画效果来实现背景图片的渐变过渡。代码如下：

body {
background-image: url(background1.jpg);
background-repeat: no-repeat;
background-size: cover;
transition: background-image 1s ease-in-out;
}
body:hover {
background-image: url(background2.jpg);
}

在上面的代码中，大家使用了CSS3的transition属性来设置背景图片的渐变效果，将background-image属性的变化设置成了1秒钟，并使用了ease-in-out的贝塞尔曲线，以实现更加自然的过渡效果。然后，在鼠标悬停在页面上时，大家将背景图片的路径修改为background2.jpg，从而实现了背景图片的渐变过渡效果。

总之，CSS可以帮助大家实现各种不同的背景图片效果，掌握了CSS换背景的技巧之后，大家就可以为页面增加更多的视觉效果，增强页面的吸引力。