CSS Gradience не работает

0

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

Это мой код:

<!DOCTYPE html>

<html>
<head>

  <title>About Leo Alfred: 12/14/2013</title>

  <style type="text/css">
    body
    {
      background: -webkit-linear-gradient(#4B647A, #081C2E);
      background: -o-linear-gradient(#4B647A, #081C2E);
      background: -moz-linear-gradient(#4B647A, #081C2E);
      background: linear-gradient(#4B647A, #081C2E);
      color: #E9EEF2;
      min-height:100%;
      margin:0;
    }


    h1 {
      text-align: center;
    }

    #me {
      height: 600px;
      width: 500px;
      border-radius: 12px;
      margin-left: auto;
    margih3 {ght: text-align: center;diu}: 12px;
      }

    h2 {
      text-align: center;
    }

    h3 {
      text-align: center;
    }
  </style>
</head>
<body>
<h1>Leo Alfred<h1>
  <img id = "me" src="assets/Leo_Pic.jpeg" title = "A Picture of Leo Alfred" alt="Leo Alfred"</div>
  <h2>Leo Alfred</h2>
  <h3>School and BDPA</h3>
  <p></p>
</body>
</html>

Заранее спасибо за помощь!

Все сказанное помогло с градиентом, но только на две трети пути вниз по странице. После этого это всего лишь синий прямоугольник.

Перейдите на страницу http://bdpastudents.com/~a7068104/2013-2014/Lab_1/HTMLLab1.html, чтобы узнать, о чем я говорю, когда я говорю синий прямоугольник.

Теги:
background
gradient

4 ответа

0
Лучший ответ

Ваша собственность неправильная. Это должен быть только background:linear-gradient(etc, etc) в отличие от background-color.

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

Edit: Если вы хотите, чтобы это были градиентные блоки, то мне жаль говорить, что я не знаю, как помочь. Но если вы предпочтете один градиент сверху вниз: JSfiddle, тогда все, что вам нужно сделать, это изменить селектор css с тела на html.

Надеюсь, что это работает!

<!DOCTYPE html>

<html>
<head>

  <title>About Leo Alfred: 12/14/2013</title>

  <style type="text/css">
    html
    {
      background: -webkit-linear-gradient(#4B647A, #081C2E);
      background: -o-linear-gradient(#4B647A, #081C2E);
      background: -moz-linear-gradient(#4B647A, #081C2E);
      background: linear-gradient(#4B647A, #081C2E);
      color: #E9EEF2;
      min-height:100%;
      margin:0;
    }


    h1 {
      text-align: center;
    }

    #me {
      height: 600px;
      width: 500px;
      border-radius: 12px;
      margin-left: auto;
    margin {ght: text-align: center;diu}: 12px;
      }

    h2 {
      text-align: center;
    }

    h3 {
      text-align: center;
    }
  </style>
</head>
<body>
<h1>Leo Alfred<h1>
  <img id = "me" src="assets/Leo_Pic.jpeg" title = "A Picture of Leo Alfred" alt="Leo Alfred"</div>
  <h2></div>Leo Alfred</h2>
  <h3>School and BDPA</h3>
  <p></p>
</body>
</html>
Поделиться
  • 0
    Я действительно удалил -цвет. Это приводит к появлению градиента, но градиент идет только на 2 трети пути вниз по странице и ниже, это просто синий цвет.
  • 0
    Это то, что происходит? JSfiddle
Показать ещё 6 комментариев
0

Попробуйте изменить css из:

background-color: -webkit-linear-gradient(#4B647A, #081C2E);
background-color: -o-linear-gradient(#4B647A, #081C2E);
background-color: -moz-linear-gradient(#4B647A, #081C2E);
background-color: linear-gradient(#4B647A, #081C2E);

Для того, чтобы:

background: -webkit-linear-gradient(#4B647A, #081C2E);
background: -o-linear-gradient(#4B647A, #081C2E);
background: -moz-linear-gradient(#4B647A, #081C2E);
background: linear-gradient(#4B647A, #081C2E);

Ссылка, заслуживающая упоминания, - это документация MDN по CSS https://developer.mozilla.org/en-US/docs/Web/CSS

Поделиться
  • 0
    Это приводит к появлению градиента, но градиент идет только на 2 трети пути вниз по странице и ниже, это просто синий цвет.
0

Это не правильный формат для градиента. Кроме того, градиенты представляют собой изображения, а не цвета.

background-image:linear-gradient(direction, colour, colour, ...)

Итак, в вашем случае:

background-image: linear-gradient(to bottom, #4B647A, #081C2E);
Поделиться
  • 0
    Это приводит к появлению градиента, но градиент идет только на 2 трети пути вниз по странице и ниже, это просто синий цвет.
0

linear-gradient - это тип background-image, а не background-color.

Поделиться
  • 0
    Это приводит к появлению градиента, но градиент идет только на 2 трети пути вниз по странице и ниже, это просто синий цвет. Также в приведенном выше коде у меня был этот случайный тег </ div>, и я избавился от этого.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню