0

我目前正在尝试为我正在设计的网站制作一个背景，该背景是一直到页面底部的渐变，但目前它每次到达我的屏幕底部时都会重复。我正在使用代码：

html {
    height: 2520;
}
body {
    height: 2500px;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: -moz-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
    background: -ms-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
    background: -o-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), color-stop(0.3, #a6f2c0), color-stop(0.65, rgba(180, 200, 210, .9)), to(black));
    background: -webkit-linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
    background: linear-gradient(top left, white, #a6f2c0 30%, rgba(180, 200, 210, .9), black);
    }

我想知道是否不可能使渐变永不重复。请让我知道它是否可以完成，如果可以，如何完成。先感谢您！

4

1 回答 1

1

您的 html 大小上没有 px 。但是你应该这样做。在这里提琴

HTML

<html><body>
    <div class="main-content-wrapper">

        ALL OF YOUR CONTENT

    </div>
</body></html>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.main-content-wrapper {
    min-height: 2520px; /* remove this. let the content decide this height */
    background: #ea2e9c;
    background: -moz-linear-gradient(top,  #ea2e9c 0%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea2e9c), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #ea2e9c 0%,#7db9e8 100%);
    background: -o-linear-gradient(top,  #ea2e9c 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #ea2e9c 0%,#7db9e8 100%);
    background: linear-gradient(to bottom,  #ea2e9c 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e9c', endColorstr='#7db9e8',GradientType=0 );
e background-image(linear-gradient(top,  #ea2e9c 0%,#7db9e8 100%));
}
于 2013-06-02T18:23:28.257 回答