Как получить два горизонтальных цвета фона в одном div с использованием линейного градиента?

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

background: -moz-linear-gradient(white 35%, black 65%); 
background: -webkit-linear-gradient(white 35%, black 65%); 
background: linear-gradient(white 35%, black 65%);

источник

2015-12-06 bɪˈɡɪnə

Посмотрите http://stackoverflow.com/questions/27606260/blocky-gradient-effect-in-css3/27613861. Вы ищете градиент с твердой остановкой, где начальная позиция второго цвета должна быть такой же, как и конечная позиция той, которая была перед ним. – Harry

Попробуйте https://jsfiddle.net/2Lzo9vfc/303/

div { 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,1); 
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(35%, rgba(255,255,255,1)), color-stop(35%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1))); 
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%); 
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%); 
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%); 
}

источник

2015-12-06 11:59:06

Или вместо 'rgba', если вы хотите установить цвета как« черный »и« белый », ваш код будет выглядеть так: https://jsfiddle.net/2Lzo9vfc/304/ –

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

.container-fluid { 
 
    float: left; 
 
} 
 
#first { 
 
    height: 100px; 
 
    width: 600px; 
 
    background-color: red; 
 
} 
 
#second { 
 
    height: 100px; 
 
    width: 600px; 
 
    background-color: blue; 
 
} 
 
#third { 
 
    height: 100px; 
 
    width: 600px; 
 
    background-color: green; 
 
} 
 
p { 
 
    position: absolute; 
 
    float: left; 
 
    font-size: 9em; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
 
    <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" /> 
 
    <title>HTML5, CSS3 and JavaScript demo</title> 
 
</head> 
 

 
<body> 
 
    <!-- Start your code here --> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="row"> 
 
      <div class="col-md-12" id="first"> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-12" id="second"> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-12" id="third"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div> 
 
    <p>some text</p> 
 
    </div> 
 

 
    <!-- End your code here --> 
 
</body> 
 

 
</html>

источник

2015-12-06 12:10:41 Wiser

Как получить два горизонтальных цвета фона в одном div с использованием линейного градиента?

ответ

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