中心渐变

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) */

但这并没有使 red 部分居中，而是将其移到了右边 part.Demo: 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.

中心渐变

Center Gradient

html

css

gradient