Question

出于某种原因，当我向下滚动页面时，我的背景图案会被切断（我将身体最小高度设置为100％）

enter image description here

无论我有多少内容，我都希望我的模式能够填满所有高度。

html,body {
  font-size: 100%;
  min-height: 100%;
  height: 100%;
  background: url(../img/bg-pattern.png);
}


body {
  padding: 0;
  margin: 0;
  font-family: "itc_avant_garde_std_bkregular", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
 }

#sparkly {
  background: url(../img/sparkly-pretty-pretty.png);
  min-height: 100%;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
}

也是html

<body>
        <div class="row"  id="sparkly">
            <div class="large-12 columns">
                <div class="large-4 small-centered columns">
                    <img class="logo" src="img/common-code-logo-chat.png" alt="CommonCode Logo" />
                </div>
                <div class="row">
                    <div class="large-12 columns">
                        <div id="chatfield">
                        <img id"fade-out" src="" alt="" />
                            <p class="chatfield_text" id="text-opacity2"><span class="second_user" id="text-opacity1">Dan P.</span><br />Nam quis enim ut erat pharetra tristique. Aliquam erat volutpat. Pellentesque vel urna sapien. Curabitur pulvinar mauris in nisl faucibus sed lobortis erat sodales. Sed accumsan sem eu est gravida mollis. In scelerisque, ligula id pulvinar congue, dui diam imperdiet risus, in molestie est tortor condimentum quam. Praesent elit enim, vulputate a varius sed, lacinia et mauris.</p>
                            <p class="chatfield_text" id="text-opacity4"><span class="guest_user" id="text-opacity3">Guest</span><br />_Thanks, although bla bla bla bla bla bla.</p>
                            <p class="chatfield_text" id="text-opacity6"><span class="first_user" id="text-opacity5">Daryl A.</span><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus urna, lacinia sed malesuada eu, malesuada in sem. In ac eros quam, sit amet bibendum nisi. Nam in libero nibh. Nulla facilisi. Quisque eget arcu augue, tempor lobortis mi. Pellentesque bibendum turpis vitae dolor sollicitudin mattis. Phasellus libero justo, porttitor vitae fringilla id, condimentum vitae nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            <p class="chatfield_text"><span class="guest_user">Guest</span><br />_bla bla bla blabal bla bla bla bla?</p>       
                        </div>
                    </div>
                </div>
                <form method="post">
                <input type="text" name="Talk to us" placeholder="Talk to Us">
                </form>
                <div class="row">
                    <div class="large-12 columns">  
                        <p><span class="first_user"> Daryl A. </span><span class="second_user"> Dan P.</span> and <span class="more_user"> 4 more </span> are currently online </p>
                    </div>
                </div>
            </div>
        </div>
</body>

我正在使用Foundation框架..

希望它不会太混乱提前感谢任何可以帮助我的人

的Fabio

Answer 1

取出height: 100%;并使用如下

html,body {
  font-size: 100%;
  min-height: 100%;
  background-image: url(../img/bg-pattern.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

height: 100%;与身高有关，所以我认为说height: 100%;没用。由于背景图像存在问题，您必须处理背景属性，最后两行将解决您的问题。

编辑1

请在下方使用。

html,
body {
  font-size: 100%;
  background: url(../img/bg-pattern.png);
  background-repeat: repeat;
  }

Answer 2

从normalize.css中的html中删除背景颜色，它将解决您的问题

html {
    /*background: #fff;*/ /* 1 */
    color: #000; /* 2 */
    font-family: sans-serif; /* 3 */
    -ms-text-size-adjust: 100%; /* 4 */
    -webkit-text-size-adjust: 100%; /* 4 */
}

向下滚动时背景剪切

2 个答案:

编辑1