Как создать градиентный фон для 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.
http://www.colorzilla.com/gradient-editor/
CSS следует применять в отдельной таблице стилей ... никогда не применяйте встроенные стили.
вые функции, которые позволяют создавать градиент, однако они не полностью поддерживаются всеми браузерами.
Если вы хотите больше узнать о CSS3-градиентах, прочитайтеЭта статья
Существует также удобный онлайн-инструмент, который создаст код CSS для создания градиента вашей спецификации,Вот.
background-image: url('path/to/image.jpg');быстрый и эффективный способ стилизации веб-страниц, особенно если у вас есть несколько страниц, ссылающихся на ваши таблицы стилей. Это позволяет вам изменить всю стилизацию всех ваших страниц одновременно с помощью одной строки кода. Впрочем, это нормально, если у вас есть одна открытая страница или если вам нужна простая страница, чтобы она выглядела по-другому, встроенного стиля достаточно, но она не распространена. Смотрите ниже для быстрого примера.
(встроенный стиль для каждой страницы)
<!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%);