Question

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

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);
    }

我想知道如果不重复制作渐变是不可能的。如果可以，请告诉我，如果可以的话，请告诉我们。提前谢谢！

Answer 1

你的html大小没有px。但是你应该这样做。 FIDDLE HERE

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%));
}

非重复渐变适合整个页面

1 个答案: