Question

我仍然在使用CSS中的渐变。出于某种原因，当我尝试为我的主div设置渐变背景时，背景会出现一些奇怪的垂直平铺。我已经尝试了背景重复属性的所有组合，但我似乎无法解决这个问题。

这里是div的完整代码，有很多注释行，我尝试了不同的代码片段来尝试解决这个问题 - 所有这些都会产生相同的平铺效果：

#centralBox {
border: 2px solid black;
border-top: none;
border-bottom: none;
width: 980px;
height: 100%;

margin-left: auto;
margin-right: auto;

/*background-color: #91C1D1;*/
/*background-repeat: no-repeat;*/


/*background: -webkit-linear-gradient(top, #91c1d1, #91d1c1);*/
/*background: -webkit-linear-gradient(top left, #000000, #ffffff);*/
/*background: -webkit-background-size: auto;*/

background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #91C1D1));

}

注意，我只使用webkit，直到我可以获得渐变属性，然后我将实现其他浏览器支持。

这是背景渲染的方式：

enter image description here

如果我将完全相同的代码移动到不同的div，渐变呈现正确，但我（想）我需要它在这个div中，因为这是包含我所有主要网站内容的那个。

好的，我的共识似乎是我的代码没问题，并且当我将代码放入其他div时渲染工作的事实表明可能还有其他的东西。

这是我的HTML：

<body>
<div id='centralBox'>
    <div id='pageTop'>
        <div id='header'>
            ...
        </div> <!-- End of header div -->

        <div id='navigation'>
            <ul>
                <li class='inactiveLink'>Home</li>
                <li><a href='about.html'>About Me</a></li>
                <li><a href='experience.html'>Experience</a></li>
                <li><a href='contact.html'>Contact</a></li>
            </ul>
        </div> <!-- End of navigation div -->
    </div> <!-- End of pageTop div -->

    <div id='bodyContent'>
        ...
    </div> <!-- End of bodyContent div -->


</div> <!-- End of centralBox div -->

</body>

我试图给出渐变的div是centralBox - 这是因为它是一个位于我网站中心的div，其固定宽度和高度为100％。如果我尝试在bodyContent div上使用渐变，它工作正常，但bodyContent是一个较小的div，因此它不会填满整个屏幕。

Answer 1

[W3Schools的] CSS3定义了两种类型的渐变：

Linear Gradients (goes down/up/left/right/diagonally)

你是否尝试过从左到右的线性灰度？你想要实现的目标是什么？

示例：

background: -webkit-linear-gradient(left, red , blue);

事实上你的看起来很好，只看了一眼......只是取决于你想要的效果，我猜想。

Answer 2

当我第一次开始使用CSS3 Gradients时，我发现这个网站是一个巨大的帮助。 http://www.colorzilla.com/gradient-editor/它不仅节省了大量时间，而且几乎与每个浏览器兼容。

此外，您的代码在我身边也很好看。您使用的是webkit浏览器吗？

DIV中的渐变背景具有垂直平铺

2 个答案: