一尘不染

拉伸和缩放CSS背景

html

有没有一种方法可以使CSS背景拉伸或缩放以填充其容器?


阅读 379

收藏
2020-05-10

共1个答案

一尘不染

对于现代浏览器,您可以使用background-size以下命令完成此操作:

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

cover 表示垂直或水平拉伸图像,因此它永远不会平铺/重复。

适用于Safari3(或更高版本),Chrome,Opera10 +,Firefox 3.6+和Internet Explorer 9(或更高版本)。

要使其与较低版本的Internet Explorer一起使用,请尝试以下CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
2020-05-10