CSS中怎么让图片铺满桌面?这个问题是经常会被提到的。在这篇文章中,我们将会分享三种方法可以让你的图片无缝铺满整个屏幕。 /* 方法一:使用background-size */ body { back
CSS中怎么让图片铺满桌面?这个问题是经常会被提到的。在这篇文章中,我们将会分享三种方法可以让你的图片无缝铺满整个屏幕。
/* 方法一:使用background-size */ body { background-image: url("你的图片地址"); background-size: cover; background-repeat: no-repeat; }
使用background-size可以让你的图片应用在body背景中。cover指的是图片会被拉伸或者缩放来达到最佳尺寸以填充整个屏幕,背景不会重复。如果你希望图片以原始尺寸作为背景并且不重复,可以使用background-repeat:no-repeat。
/* 方法二:使用绝对定位 */ img { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; /* 其他样式设置 */ }
使用绝对定位可以让你的图片在整个屏幕中居中。上下左右的值设置的比屏幕的大小要大使图片可以无缝地平铺,并且使用margin:auto来水平和垂直居中图片。
/* 方法三:使用vw和vh */ img { width: 100vw; height: 100vh; /* 其他样式设置 */ }
使用vw和vh可以使你的图片在整个视口中铺满。vw指的是视口的宽度,vh指的是视口的高度。设置宽度和高度为100vw和100vh让图片可以完整覆盖整个视口。
以上便是三种可以让你的图片无缝铺满屏幕的方法,希望对你有所帮助。
粉丝
0
关注
0
收藏
0