Добавление пользовательских стилей для начальной загрузки Navbar

Question

мне интересно, как я могу стиль бутстрэпами нав бар, чтобы выглядеть примерно так:

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

Было бы лучше использовать CSS или изображения для достижения эффекта?

Answer 1

Я бы использовал фоновое изображение repeat-x для всего окна, которое содержит узор, который вы упомянули.

Что-то вроде этого:

.navbar-inner { 
    background-image: url(image.png); 
    background-repeat: repeat-x; 
    background-position: top left; 
    padding-top: 10px; /*Height of the image*/ 
} 

Вы можете использовать изображение, как это:

Answer 2

Я сделал это с помощью CSS на этом сайте - http://heritage.warwickshire.gov.uk/

  #colophon { 
      background: rgb(0,106,85); 
      background: -moz-linear-gradient(left, rgba(248,153,0,1) 14%, rgba(181,0,0,1) 14%, rgba(181,0,0,1) 28%, rgba(10,9,24,1) 28%, rgba(10,9,24,1) 42%, rgba(0,179,0,1) 42%, rgba(0,179,0,1) 56%, rgba(210,0,144,1) 56%, rgba(210,0,144,1) 70%, rgba(229,86,0,1) 70%, rgba(229,86,0,1) 84%, rgba(0,128,238,1) 84%, rgba(0,128,238,1) 98%); 
      background: -webkit-gradient(linear, left top, right top, color-stop(14%,rgba(248,153,0,1)), color-stop(14%,rgba(181,0,0,1)), color-stop(28%,rgba(181,0,0,1)), color-stop(28%,rgba(10,9,24,1)), color-stop(42%,rgba(10,9,24,1)), color-stop(42%,rgba(0,179,0,1)), color-stop(56%,rgba(0,179,0,1)), color-stop(56%,rgba(210,0,144,1)), color-stop(70%,rgba(210,0,144,1)), color-stop(70%,rgba(229,86,0,1)), color-stop(84%,rgba(229,86,0,1)), color-stop(84%,rgba(0,128,238,1)), color-stop(98%,rgba(0,128,238,1))); 
      background: -webkit-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%); 
      background: -o-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%); 
      background: -ms-linear-gradient(left, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%); 
      background: linear-gradient(to right, rgba(248,153,0,1) 14%,rgba(181,0,0,1) 14%,rgba(181,0,0,1) 28%,rgba(10,9,24,1) 28%,rgba(10,9,24,1) 42%,rgba(0,179,0,1) 42%,rgba(0,179,0,1) 56%,rgba(210,0,144,1) 56%,rgba(210,0,144,1) 70%,rgba(229,86,0,1) 70%,rgba(229,86,0,1) 84%,rgba(0,128,238,1) 84%,rgba(0,128,238,1) 98%); 
      height: 0px; 
      padding-top: 0.5em; 
      }