Загрузить PDF
Загрузить PDF
Фон является одним из наиболее важных элементов веб-сайта. Хороший фон создает определенное настроение, шарм сайта и дополняет его содержание. Есть много различных способов добавить фон. Некоторые методы позволяют применить фон для всех страниц сайта, в то время как другие добавляют фон только на определенную страницу. Эта статья научит вас, как добавить фон на ваш сайт с помощью HTML или CSS.
Шаги
Одноцветный фон
-
Одноцветный фон – самый основной тип фонов, который можно поставить на веб-сайт. На самом деле, каждый веб-сайт создается на белом фоне. Тем не менее, в то время как белый фон может быть очень приятный на вид и не раздражающий, некоторые предпочитают цветной фон с различными темами и рисунками.
-
Откройте исходный код страницы (source).
-
В тексте кода напишите bgcolor. Теперь текст будет выглядеть так -
<body bgcolor="НАЗВАНИЕЦВЕТА">в поле НАЗВАНИЕЦВЕТА (COLORNAME) введите название цвета на английском. Например --
<body bgcolor="red">(цвет) -
<body bgcolor="#FF0000">(номер) -
<body bgcolor="rgb(255, 8, 9)">(значение RGB)
-
-
Экспериментируйте со значением RGB и у вас получится много различных оттенков. Помните, что цвета надо вводить правильно и на английском.Реклама
Изображение в качестве фона
- Добавить изображение в качестве фона сложнее, чем одноцветный фон.
-
Добавьте такое значение в код -
<body background="SRC">, где SRC это исходный файл или ссылка на местоположение изображения.-
<body background="red.gif">(в той же папке) -
<body background="\Folder1\red.gif">(в другой папке) -
<body background="imagepage1/red.gif">(в интернете)
-
-
Помните, что нужно вводить изображения в формате .gif/ .jpeg /.bmp.Реклама
Одноцветный фон
-
Чтобы добавить одноцветный фон в CSS, добавьте атрибут стиля. Вы можете также назначить ID и класс и использовать как внешние, так и внутренние примеры стилей.
-
Текст кода должен выглядеть так -
-
<body style="background-color: COLORNAME;">
, где COLORNAME это название цвета, его номер или его RGB .
Реклама -
Добавление изображения
-
Чтобы добавить изображение, добавьте атрибут стиля в исходный код. Вы можете назначать ID и классы, а также использовать как внешние, как и внутренние примеры стилей.
-
Код должен выглядеть так -
-
<body style="background-image:url('SRC'); ">
-
-
Помните, что SRC это исходное местоположение изображения. Например, папка или ссылка.
-
<body style="background-image:red.gif;">(в той же папке) -
<body style="background-image:\Folder1\red.gif">(в другой папке) -
<body style="background-image:imagepage1/red.gif">(ссылка на страницу в интернете).
-
-
Помните, что нужно указать имя файла и расширение.Реклама
Повторить изображение фона несколько раз
-
Чтобы сделать фон с повторением одного изображения или узора, измените код на -
<body style="background-image:url('SRC'); background-repeat:REPEAT-SETTINGS; "> Где REPEAT-SETTINGS это настройки повторения изображения. Например--
<body style="background-image: red.gif; background-repeat: repeat;">(Повтор изображения горизонтально и вертикально.) -
<body style="background-image: red.gif; background-repeat: repeat-x;">(Повтор изображения горизонтально.) -
<body style="background-image: red.gif; background-repeat: repeat-y;">(Повтор изображения вертикально.)
-
Изображение, которое не прокручивается
-
Изображение, которое не прокручивается, когда вы просматриваете нижнюю или верхнюю часть сайта. Вот код -
-
<body style="background-image:url('SRC'); background-attachment:fixed; background-position:POSITION; background-repeat:REPEAT SETTINGS;">
, где SRC это исходная папка с изображением, POSITION это позиция изображения (например, центр, верх, низ); background – тип фона.
Реклама -
Советы
- Прочитайте статью полностью.
Реклама
Предупреждения
- В HTML 4.01 и в XHTML этот метод может не сработать.
Реклама
Реклама
