背景图以拉伸方式(不重复)填充背景

今天要解决一个用背景图以拉伸方式(不重复)填充背景的问题。

看了《用CSS把背景图片拉伸》和《css 如何让背景图片拉伸填充避免重复显示》后用background-repeat配合background-size解决了底图不重复的问题。但另一个问题来了,图片是按宽度作为比例进行缩放的,如果这张图是横向,在手机竖向时,下面一截就空了,如下图:

再次看《用CSS把背景图片拉伸》时发现示例中有 background-attachment: fixed; 属性加上一试,Ok了。 如下图

最终代码如下:

.background-pic
{
background-image: url(图片地址);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

原文地址:https://www.cnblogs.com/borter/p/9480566.html