Как создать градиентный фон для HTML-страницы

Я нахожусь в процессе изучения HTML.

Каков наилучший способ создания градиентного фона для HTML-страницы?

Пока это то, что я имею в качестве фона:

<code>body style="background-color:Powderblue"
</code>

Я знаю, что это не градиент.

Ответы на вопрос(5)

но это может быть сделано в CSS (в частности, CSS3).

Вы должны добавить класс к телу вашей страницы или div внутри него, который окружает весь ваш контент. Вы можете использоватьгенератор градиента css чтобы получить код для вставки в ваш класс CSS.

Вот простой пример для div:http://jsfiddle.net/8fDte/

Вы также можете сделать следующее, если хотите на теле. Обратите внимание, что вы должны сделать ссылку на файл CSS, который будет хранить ваши стили.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="PathToCss.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY class="MyGradientClass">

  </BODY>
</HTML>

CSS

Этот код может быть сгенерирован генератором градиента CSS, подобным приведенному выше.

.MyGradientClass
{
    height:200px;
     background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(113,61,62)),
        color-stop(0.63, rgb(147,92,93)),
        color-stop(0.82, rgb(177,120,121))
    );   
}​

Edit:

Как упоминал Рори, CSS3 не полностью поддерживается всеми современными браузерами. Тем не менее, есть некоторые инструменты, такие какПирог CSS чтобы помочь IE принять некоторые функции CSS3.

 alpha_nom11 апр. 2012 г., 17:36
Можете ли вы показать мне пример того, как я должен добавить класс к своему телу, чтобы html распознал css3: Другими словами, код
 alpha_nom11 апр. 2012 г., 17:55
Хорошо, и что будет содержать мой PathtoCss.Css?
 11 апр. 2012 г., 18:00
PathToCss.css - это файл CSS, который будет содержать созданный вами класс CSS. Примером класса является созданный мной jsfiddle.
 11 апр. 2012 г., 17:40
вам даже не нужно добавлять класс ... просто поместите его в тело в вашем CSS
 11 апр. 2012 г., 17:42
Это правильно, вы можете просто поместить это в div внутри тела. В любом случае будет работать.

http://www.colorzilla.com/gradient-editor/

CSS следует применять в отдельной таблице стилей ... никогда не применяйте встроенные стили.

 16 апр. 2012 г., 20:27
Может быть важно указать, почему важно иметь все стили во внешней таблице стилей.

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

Если вы хотите больше узнать о CSS3-градиентах, прочитайтеЭта статья

Существует также удобный онлайн-инструмент, который создаст код CSS для создания градиента вашей спецификации,Вот.

 11 апр. 2012 г., 17:58
В CSS:background-image: url('path/to/image.jpg');
 alpha_nom11 апр. 2012 г., 17:37
Хорошо. Тогда почему я вижу много профессиональных веб-сайтов с градиентным фоном? Они используют другой язык. Как вы думаете, удобно ли использовать css3, потому что я только начинаю или использую другой язык?
 alpha_nom11 апр. 2012 г., 17:57
Допустим, я делаю фон в фотошопе. Как это сработает?
 11 апр. 2012 г., 17:35
LOL, у меня был тот же ответ, те же две ссылки даже! Рори прав.
 11 апр. 2012 г., 17:38
Это наиболее вероятные фоновые изображения.

быстрый и эффективный способ стилизации веб-страниц, особенно если у вас есть несколько страниц, ссылающихся на ваши таблицы стилей. Это позволяет вам изменить всю стилизацию всех ваших страниц одновременно с помощью одной строки кода. Впрочем, это нормально, если у вас есть одна открытая страница или если вам нужна простая страница, чтобы она выглядела по-другому, встроенного стиля достаточно, но она не распространена. Смотрите ниже для быстрого примера.

(встроенный стиль для каждой страницы)

<!doctype html>
<html>
<head>
   <title>THIS WOULD GET AGGRAVATING IF DONE ON 10 PAGES!</title>
   <style="text/css">
      body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}
   </style>
</head>
<body>
</body>
</html>

.... или это было бы так

   <!doctype html>
      <!doctype html>
<html>
<head>
   <title>THIS CHANGES SAME PARAMETERS ON 100 PAGES WITH SAME LINK INSTANTLY!</title>
   <link rel="stylesheet" href="/cssfolder/yourcssheet.css" />

</head>
<body>
</body>

и ваш & quot; yourcssheet.css & quot; таблица стилей будет выглядеть так

/*BEGINNING OF STYLESHEET, NO OTHER CODING NECESSARY BUT SOME MIGHT PUT @meta charset utf-8 AT THE TOP BUT IS NOT NEEDED TO FUNCTION*/

    body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}

/*END OF STYLESHEET*/

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

Надеюсь это поможет. [email protected]

которые создают градиенты. Либо вы можете использовать их или вы можете создать свой собственный

Simply check here: http://www.cssmatic.com/gradient-generator

Также вы можете создать свой собственный таким образом

CSS

background-image: -webkit-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -moz-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -ms-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -o-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
 09 дек. 2015 г., 05:15
@jiaweizhang, ссылка работает правильно, пожалуйста, проверьте URL, а также информацию, которую я здесь использовал, уместно, вы пробовали эту?
 08 дек. 2015 г., 10:44
Пожалуйста, разместите соответствующую информацию здесь вместо ссылки, так как ссылка может стать недействительной во времени.
 09 дек. 2015 г., 05:27
Также посмотрите на ссылкуcssmatic.com/gradient-generator

Ваш ответ на вопрос