Два разных цвета с эффектом линейного градиента

У меня есть два цвета со мной, красный и желтый. Согласно формату линейного градиента, если мы вставляем красный и желтый, между ними происходит плавный переход между ними. Если я не хочу плавного перехода, как мы можем представить их в коде? Ниже код с плавным переходом, но я не хочу плавного перехода между этими двумя цветами. Любая помощь Пожалуйста,Два разных цвета с эффектом линейного градиента

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#grad1 { 
    height: 200px; 
    background: linear-gradient(red, yellow); 
} 
</style> 
</head> 
<body> 

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

</body> 
</html>

источник

2016-02-11 Manoj Karthik

Что вам нужно, это трудно остановить градиент. Примеры - http://stackoverflow.com/questions/33918454/horizontal-sharp-background-gradient-with-specific-length-of-first-color/33918557#33918557 и http://stackoverflow.com/questions/27606260/ Блочный-градиент-эффект-в-CSS3/27613861 # 27613861. Добавьте цвета к стоп-позициям в цвета и сделайте конечное положение одного цвета стартовой позиции следующего. – Harry

Да! Отлично!!!! –

Почему вы просто не делаете 2 divs один над другим?

#grad1 { 
    height: 100px; 
    background: red; 
} 
#grad2 { 
    height: 100px; 
    background: yellow; 
}

Посмотри здесь работает: https://jsfiddle.net/eosx5cgc/

источник

2016-02-11 09:28:01

Я принимаю и убеждаюсь в этом методе. В одном div есть моя мысль, поэтому я задал этот вопрос. Престижность !!!!!! –

Отметьте как правильно, если это вам помогло. Другие ответы хороши, если вам нужно что-то более сложное или абсолютно необходимо находиться в одном div. –

Используйте это:

background: linear-gradient(to bottom, red 0%,red 50%,yellow 51%,yellow 100%);

~~Demo~~URL теперь возвращает 404

источник

2016-02-11 09:28:30 coderman

http://www.colorzilla.com/gradient-editor/#ff0400+0,ff0400+50,fffe00+51,fffe00+100 – coderman

CSS3 градиент мы можем просто генерировать в онлайн-инструментов, colorzilla

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#grad1 { 
 
    height: 200px; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,ff0000+50,ffff00+51,ffff00+100 */ 
 
background: rgb(255,0,0); /* Old browsers */ 
 
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 51%, rgba(255,255,0,1) 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00',GradientType=0); /* IE6-9 */ 
 

 

 
} 
 
</style> 
 
</head> 
 
<body> 
 

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

 
</body> 
 
</html>

источник

2016-02-11 09:32:25 Krish

вы можете

.tg { 
    height: 75px; 
    width: 400px; 
    background-image: linear-gradient(135deg, red 60%, yellow 60.5%); 
} 

<div class='tg'></div>

demo

источник

2016-02-11 09:32:57

Два разных цвета с эффектом линейного градиента

ответ

Смежные вопросы