在包装器外部获取渐变背景颜色以完成完整循环

Question

我的网站上有一个背景颜色为灰色的页面，我正在尝试以不同于从左到右的方式向其添加渐变。我的页面有一个外部 div，它占据了页面宽度的 100%。然后我有一个内部 div 占据页面的 80%，但自动对齐。我想知道，如果可以的话，如何在外部 div 的每一侧（左侧和右侧）进行完整的渐变循环，即在内部 div 开始之前显示的 10% 部分。

假设 A 等于 10%，每次我将两种颜色放在一起时，就是在这 10% 内发生的渐变。我想做这个...

#181818，#282828 AAAAAAAA#282828，#181818

我该怎么做？

HTML

<div class="graypage">
        <div class="homeimg">
             gfdsgsg
        </div>
</div>

CSS

.graypage, .whitepage { margin: 0 auto; }
/*------Page Wraps--------*/
.graypage {
    width: 100%;
    left: 0;
    right: 0;
    min-height: 100%;
    background: -webkit-linear-gradient(left, #282828, #181818); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #282828, #181818); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #282828, #181818); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #282828, #181818); /* Standard syntax */
}
.homeimg {
background-image: url("/images/bright_lights_small.jpg");
width: 80%;
 background-size: cover;
background-position: center;
height: 100%;
position: absolute;
margin-right: 10%;
margin-left: 10%;
}

Answer 1

基本上，您在这里有 2 个可能性。您可以设置重复渐变

div {
  width: 500px;
  height: 100px;
  background: repeating-linear-gradient(to right, yellow 0%, green 10%);
}

<div></div>

你可以玩背景大小

    div {
      width: 500px;
      height: 100px;
      background: linear-gradient(to right, yellow, green);
      background-size: 10% 100%;
    }

<div></div>

Answer 2

据我了解，您想要两个栏 - 一个在 outerDiv 的左侧，另一个在右侧。您希望这些条中的每一个占页面宽度的 10%。您还希望每个栏循环显示颜色 #181818, #282828, #aaaaaa, #282828, #181818。

我只使用带有 12 个色标的线性渐变。像这样：

#outerDiv
{
    background: linear-gradient(to right, 
                                #181818 0%,#282828 2%,#aaaaaa 4%,#aaaaaa 6%,#282828 8%,#181818 10%,
                                #181818 90%,#282828 92%,#aaaaaa 94%,#aaaaaa 96%,#282828 98%,#181818 100%); /* W3C */
    width: 100%;
}

来源：http://www.colorzilla.com/gradient-editor/

此处它应用于外部 div 并且纯色应用于（宽度的 80%）内部 div。

编辑：这是（现已更新）使用的 html 和 css。

<style>
body
{
    margin: 0;
    padding: 0;
}
#outerDiv
{
    background: linear-gradient(to right, 
                                #181818 0%,#282828 10%,
                                #282828 90%,#181818 100%); /* W3C */
    width: 100%;
}
#innerDiv
{
    width: 80%;
    margin: auto;
    background-color: #dddddd;
}
</style>
</head>
<body>
<div id='outerDiv'>
    <div id='innerDiv'>
        <button id='goBtn'>Change the text</button>
        <div class="menu-wrapper">
            <ul>
                <li>WORD1</li>
                <li>WORD2</li>
                <li>WORD3</li>
                <li>WORD4</li>
            </ul>
        </div>
    </div>
</div>
</body>

此代码产生以下结果：

在包装器外部获取渐变背景颜色以完成完整循环

Getting gradient background color to due full cycle on the outside of a wrapper

html

css

gradient