css3渐变和背景图片 |css上一兄弟元素

/*用CSS3渐变实现背景色*/
.gradient-bg{
background: linear-gradient(#fff,#f0f);
}
/*用CSS3渐变实现背景图片*/
.gradient-img{
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
url('photo.jpg');
}
/*用背景图片实现背景*/
.img-bg{
background-image: url('photo.jpg');
}
/*用背景图片实现渐变背景*/
.img-gradient{
background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),
url('photo.jpg');
}

上面四个代码分别实现了CSS3渐变和背景图片的应用，可以看到无论是用哪种方法都能实现漂亮的背景效果。

不同点在于渐变可以实现更多种类的背景，比如径向渐变、重复渐变、角度渐变等等，而背景图片一般只是单纯的图像。

相似点在于它们都可以通过多个颜色、透明度等属性来达到扁平化、叠加等效果，都可以通过媒体查询实现响应式设计。

在使用时应根据实际情况选择合适的方法，如果是图像重要的页面建议使用背景图片，如果是色块的话可以使用渐变来实现，不过具体的还要根据具体的页面去考虑。