请教,仿写的静态页面图片凹陷问题?

在仿写静态页面的时候,其中一个页面的若干背景图仔细看都有凹陷问题,不知道是什么问题引起的;
背景图相关代码如下:
html部分: <div class="cell cell-5">

          <div class="wrap">
              <div class="slogan">
                  <h3 class="product-name">无卡取电套装  </h3>
                  <h3> 让客房变聪明</h3>
              </div>
              <div class="desc">
                  <p>
                      无需插卡自动取电、节能自动断电、非法闯入警报、可疑入住行为       监测,
                      <br/>
                      这一切只需配备无卡取电套装即刻华丽升级
                  </p>
              </div>
          </div>
      </div>

css部分样式如下:

            .cell-view .cell-5 .wrap{
                background-image: url(../img/indexTwo/qd.png);
                height: 534px;
                padding-right: 90px;
                margin: 0 auto;
                width: 1160px;
                position: relative;
                padding-top: 1px;
                text-align: right;
            }

截图如下所示:
图片描述 这是官网静态页面的显示效果(图一)
图片描述 这是我写的页面的效果,图中标注的红色框中的凹陷不知道是何问题引起的 (图一)
图片描述 官网效果(图二)
图片描述 我写的效果,红色框中的小凹槽不知是如何产生的 (图二)

阅读 2.2k
1 个回答

你的div宽高设置得不对,超过了背景图的大小,所以超过的部分背景图默认继续重复平铺了哦。

建议右键审查元素看看被仿网站的宽高到底是多少。

另外多加个属性background-repeat: no-repeat;来禁止平铺哦。

希望对你有帮助。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题