前端开发

一个花费我一下午解决的css问题,必须记录一下

2020-11-06 16:39:04 阅读数 7150 收藏 0

需求很简单,大概是这样子的,app的头部和app中间的内容都放的图片。

我放中间内容的css是这样子写的:

.bg {
                width: 100%;
                height: 100%;
                padding-top: 50px;
                position: fixed;
                background-image: url(../../images/new/bg.png);
                background-repeat: no-repeat;
                background-position: 0px 0px;
                background-size: 100% 100%;
            }

然后奇葩的事情就出现了,

我很奇怪,为什么中间会缺一块。

我不服输,我用最直接的办法,我给了个margin-top:-20px;

果然图片上去了

但是底部缺了一块,我慌了,什么情况。

然后我想了一下,把背景图片替换成了背景颜色,竟然是好用的。那就说明我的代码是没有问题,我查看了下图片。

果然UI给的图片,顶部多了块透明的背景图。

但是解决这个问题整体花了我很长时间,我反复确认自己的代码,想了很多奇奇怪怪的解决办法,还是没有解决这个问题。

其实确认一下图片就好了,下次长经验了