CSS 中,我们有时候需要将一张图片放到一个 div 内,同时让它拉伸并铺满整个 div,这时候我们可以使用 CSS 的 background-image 支持来轻松实现这个效果。
我们可以使用以下的 CSS 代码将一张图片铺满整个 div:
.container { background-image: url('path/to/image.jpg'); background-size: cover; background-position: center center; }
上述代码用于一个 class 为 container 的 div,其中我们设置背景图片为 path/to/image.jpg。background-size 属性设置 div 的背景图片始终保持等比例缩放,以覆盖整个 div,background-position 属性将图片位置设置为居中显示。
如果我们想要将图片铺满其中一个方向而保持图片完全显示,我们可以将 background-size 属性设置为 contain:
.container { background-image: url('path/to/image.jpg'); background-size: contain; background-position: center center; }
上面的 CSS 代码用于一个 class 为 container 的 div,其中我们设置背景图片为 path/to/image.jpg。background-size 属性设置为 contain,将确保整个图片在 div 中显示完整,而 background-position 属性将图片位置设置为居中显示。
在使用 background-image 属性之外,我们还可以使用 background-color 属性来设置一个背景色,这有时候会更加有趣。例如:
.container { background-color: #000; background-image: url('path/to/image.jpg'); background-size: cover; background-position: center center; }
上述代码除了将背景图片设置为 path/to/image.jpg 以外,还将背景颜色设置为黑色,这样图片显示时就会在黑色背景上显示。
通过使用 CSS 的 background-image 属性,我们可以轻松地将任意图片铺满整个 div。