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

据我所知，你想要两个酒吧 - 一个位于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。 enter image description here

编辑：这是（现已更新）使用的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>

此代码产生以下结果： enter image description here

Answer 2

在细菌方面，你有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>

在包装器的外部获得渐变背景颜色到应有的完整周期

2 个答案: