css - 请教，仿写的静态页面图片凹陷问题？

问题描述

问 题

在仿写静态页面的时候，其中一个页面的若干背景图仔细看都有凹陷问题，不知道是什么问题引起的；
背景图相关代码如下：
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;
            }

截图如下所示：
这是官网静态页面的显示效果（图一）
这是我写的页面的效果，图中标注的红色框中的凹陷不知道是何问题引起的 （图一）
官网效果（图二）
我写的效果，红色框中的小凹槽不知是如何产生的 （图二）

解决方案

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

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

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

希望对你有帮助。

这篇关于css - 请教，仿写的静态页面图片凹陷问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！