中心渐变

Question

我创建了一个颜色为白色，红色，白色的渐变：

background: -webkit-linear-gradient(left, white , red, white);
background: -o-linear-gradient(right, white, red, white);
background: -moz-linear-gradient(right, white, red, white); 
background: linear-gradient(to right, white , red, white);

在这里您可以看到演示：http://jsfiddle.net/mmMVN/43/

我想要达到的目的是：

1. 白色颜色一直持续 30％

2. 红色 30-70％

3然后白色再次 30％。

表示红色部分恰好位于方框的中间

所以我做的是：

background: -webkit-linear-gradient(left, white 30%, red 70%, white 100%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white 30%, red 70%, white 100%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white 30%, red 70%, white 100%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white 30%, red 70%, white 100%); /* Standard syntax (must be last) */

但这并不是红色部分的中心，而是将其移到右侧。演示：http://jsfiddle.net/mmMVN/41/

如何将红色部分居中？谢谢

Answer 1

你可以试试这个：

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, white 30%, red 50%, white 70%); 
    background: -o-linear-gradient(right, white 30%, red 50%, white 70%); 
    background: -moz-linear-gradient(right, white 30%, red 50%, white 70%); 
    background: linear-gradient(to right, white 30%, red 50%, white 70%);
}

<div id="grad1"></div>

问题来自你的百分比重新分配：

right, white 30%, red 70%, white 100%

意味着白色将从30％开始，红色将以70％开始，然后在100％时淡化为全白色

---

OP评论后更新：

#bck {
    height: 200px;
    background: red;
    margin-left: 30%;
    width: 40%;
}

<div id="bck"></div>

Answer 2

解决方案是：

   background: linear-gradient(to right,  white 30% , red 50% , white 70%)

请在此处查看演示：http://jsfiddle.net/mmMVN/47/ 使用了边框，因此它更像是可见的

Answer 3

尝试这样：

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, white 30%, red 31%, red 69%, white 70%); 
    background: -o-linear-gradient(right, white 30%, red 31%, red 69%, white 70%); 
    background: -moz-linear-gradient(right, white 30%, red 31%, red 69%, white 70%); 
    background: linear-gradient(to right, white 30%, red 31%, red 69%, white 70%);
}

希望这会有所帮助。这是fiddle。