网页布局时,三张背景图片出现白线的解决办法

项目开发中发现两个背景图片之间有一条白线如如下图所示。
网页布局时,三张背景图片出现白线的解决办法_第1张图片

  • 在分析代码之后发现白线是由设置了水平居中margin:0 auto造成:
  • 所以我们可以使用负margin技术设置margin-top:-1px解决这个问题。
.center {
            height: 855px;
            width: 1920px;
            background: url('https://static-ftcms.jd.com/p/files/5.jpg') center no-repeat;
            background-size: 1920px 855px;
            margin: 0 auto;
            margin-top: -1px;
        }
        
        .bottom {
            height: 697px;
            width: 1920px;
            background: url('https://static-ftcms.jd.com/p/files/5f2a8a3821.jpg') center no-repeat;
            background-size: 1920px 697px;
            margin: 0 auto;
            margin-top: -1px;
        }

你可能感兴趣的:(前端,html,css)