с использованием градиента, но без смешивания цвета

Question

Я не знаю, является ли это глупым вопросом или что-то в этом роде, но я хочу, чтобы заполнить определенный процент одним цветом и оставшейся частью другим.

И градиент собственности

.div{ 
    background: linear-gradient(to right, #000 50%, #fff 50%); 
} 

Результаты в

.div{ 
    background: linear-gradient(to right, #000 28%, #fff 72%); 
} 

И это приводит к

я хочу, чтобы получить белый и черный, чтобы не перепутать и быть отделено от всех проценты.

Answer 1

попробовать этот

.div{ 
    background: -webkit-linear-gradient(left, black 50%, white 0%); 
    background: -moz-linear-gradient(left, black 50%, white 0%); 
    background: -ms-linear-gradient(left, black 50%, white 0%); 
    background: linear-gradient(left, black 50%, white 0%); 
} 

Answer 2

Я не могу комментировать из-за низкой репутации. Поэтому я спрашиваю здесь. Почему вы хотите использовать градиент на первом месте, если вы не хотите, чтобы они смешивались?

В любом случае это работает:

div{ 
    height: 200px; 
    background: -moz-linear-gradient(left, white 50%, black 0%); 
    background: -linear-gradient(left, white 50%, black 0%); 
    background: -webkit-linear-gradient(left, white 50%, black 0%); 
} 

вы можете поместить любое значение белого цвета. Это не смешивается.

Answer 3

Вы можете дать множественный цвет градиента к Div Используйте этот Css

Проверка этой демке

http://jsfiddle.net/dineshkanivu/2pcccd2p/1/

http://jsfiddle.net/dineshkanivu/2pcccd2p/

background: #ff474a; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ff474a 0%, #7a2e68 50%, #0cf900 51%, #0a0784 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff474a), color-stop(50%,#7a2e68), color-stop(51%,#0cf900), color-stop(100%,#0a0784)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff474a', endColorstr='#0a0784',GradientType=0); /* IE6-9 */ 

Answer 4

вы имеете в виду:

div{ 
 
    background: linear-gradient(to right, #000 28%, transparent 28%, transparent 72%,#fff 72%); 
 
    color:green 
 
} 
 
body { 
 
    background:yellow 
 
    }

<div> lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla</div>