CSS中的背景属性background可以设置图片作为背景,使用背景图片可以增强网页的视觉效果。但是图片默认是平铺的,有时候我们需要让图片不平铺,以达到更好的效果。
在CSS中,我们可以使用background-repeat属性来控制背景图片的重复方式。默认值是repeat,即平铺。如果我们想让背景图片不平铺,就可以设置为no-repeat。
body { background: url("beijing.jpg") no-repeat; }
上面的代码中,我们设置了body元素的背景图片为“beijing.jpg”,并且将background-repeat设置为no-repeat,从而达到不平铺的效果。
当然,如果我们想要背景图片在页面中居中并且不平铺,我们还可以设置背景图片的位置。使用background-position属性可以控制背景图像的位置,它的值可以是像素值、百分比值,或者是关键字值。常用的关键字有center,表示居中对齐。
body { background: url("beijing.jpg") no-repeat center center fixed; background-size: cover; }
上面的代码中,我们设置了body元素的背景图片为“beijing.jpg”,并且将background-repeat设置为no-repeat,background-position设置为居中对齐。此外我们还设置了background-size为cover,以使图片大小适应整个页面屏幕的大小。
以上就是如何让背景图片不平铺的方法,通过设置background-repeat和background-position可以轻松实现。希望对您有所帮助!