gpt4 book ai didi

html - 适合整个页面的非重复渐变

转载 作者:太空宇宙 更新时间:2023-11-04 14:57:01 25 4
gpt4 key购买 nike

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

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

我想知道是否不可能使渐变永不重复。请让我知道是否可以完成,如果可以如何完成。提前致谢!

最佳答案

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

关于html - 适合整个页面的非重复渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16885650/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com