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


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

看了《用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;
}


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM