在CSS中,有一种背景拉伸铺满屏的方法,下面我们来了解一下。
body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; }
上面的代码中,我们设置了一个背景图片,并使用了background-size属性设置背景拉伸方式为cover。
该属性值可以选择:cover、contain、auto、length、percentage等,其中cover表示背景图片铺满元素,需按比例缩放,并覆盖整个元素。而no-repeat则表示不重复图片。
除此之外,我们还可以使用background-position属性设置背景位置,从而达到更好的视觉效果。
body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top center; }
通过设置为top center,背景图片将在纵向上靠近元素顶部,并在横向上居中。
使用这种方法可以使背景图片完美地铺满整个屏幕,为网页增添视觉美感。