gpt4 book ai didi

html - CSS:除非页面滚动,否则将背景渐变设置为宽度 100%

转载 作者:可可西里 更新时间:2023-11-01 12:54:04 25 4
gpt4 key购买 nike

这里有两个屏幕截图,显示了必须滚动的小视口(viewport)的效果。

alt text alt text

HTML 看起来像这样:(忽略 head 和 html 标签)

<body>
<div id="grad1"></div>
<div id="wrapper">
<header>
<h1 class="logo"><a href="/">Business Name</a></h1>
</header>
<nav>
<ul>
<li><a class="first" id="index" href="/index.php">Home</a></li>
<li><a id="whatwedo" href="/whatwedo.php">What we do</a></li>
<li><a id="communicating" href="/communicating.php">Communicating</a></li>
<li><a class="last" id="contact" href="/contact.php">Contact Us</a></li>
</ul>
</nav>
<div style="clear:both;"></div>
<section>
<?= $content ?>
</section>
<footer>
&copy; 2010
</footer>
</div>
</body>

与 body、grad1 和 wrapper 相关的(精简的)CSS 如下所示:

body {
color: #111;
background-color: #3E9C9D;
}

#grad1 {
height: 600px;
position: absolute;
top: 0;
left: 0;
z-index: -100;
width: 100%;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
}


#wrapper {
max-width:960px;
min-width:840px;
margin: 0 auto;
}

我该如何解决这个问题?据我所知,我必须在不同的 div 上设置渐变,因为我需要指定高度。

(我知道 CSS 渐变在 IE 中不起作用 - 那里有一个背景图像来模拟行为。它有同样的问题。)

最佳答案

好的,对于发现这个但无法解决的人,CSS 应该如下所示:

body {
color: #111;
background-color: #3E9C9D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3E9C9D));
background-image: -moz-linear-gradient(#fff 0%, #3E9C9D 100%);
background-repeat:repeat-x;
background-size: 100% 600px;
-o-background-size: 100% 600px;
-moz-background-size: 100% 600px;
-webkit-background-size: 100% 600px;
}

#wrapper {
max-width:960px;
min-width:840px;
margin: 0 auto;
}

2 年后的编辑 - 渐变语法发生了一些变化,现在每个人都支持它。在使用此代码之前,请务必阅读更改。

关于html - CSS:除非页面滚动,否则将背景渐变设置为宽度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2350984/

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