css在背景上加图片

CSS是一种用于网页中样式的编程语言，它可以通过控制元素在页面中的显示方式来达到制作美观网页的目的。在CSS中，我们可以在网页的背景中加入图片，使得页面更具视觉效果。

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

以上代码是加入背景图片最常用的方法。我们可以通过background-image属性来设置图片的路径。background-repeat属性用于指定图片重复的方式，可以选择不重复、水平重复、垂直重复、水平和垂直重复等方式。background-size属性用于设置图片的大小，可以选择cover、contain或指定具体的大小。

除了使用整张图片作为背景外，我们还可以使用CSS Sprites的方式。CSS Sprites是一种将多张小图片合并成一张大图片的方法，以减小网页的http请求数量，提高网页的加载速度。

.sprite {
    background-image: url('sprites.jpg');
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-home {
    height: 50px;
    width: 50px;
    background-position: 0 0;
}
.icon-star {
    height: 50px;
    width: 50px;
    background-position: -60px 0;
}
    

以上是CSS Sprites的使用方法。我们可以将多张小图片合并成一张大图片，并通过background-position属性指定每个小图片在大图片中的位置。然后通过设置元素的高宽和背景图片来显示对应的小图片。

总之，通过在网页的背景中加入图片，我们可以为网页增加更多的视觉效果，使得页面更加生动有趣。CSS Sprites则可以优化网页的性能，让网页加载更快速。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！