Главная » 2015 » Июль » 27 » Как добавить фон на веб–страницу
09:21
Как добавить фон на веб–страницу

Как добавить фон на веб–страницу

2 методика:С помощью HTMLС помощью CSS

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

Шаги

Метод 1 из 2: С помощью HTML

Одноцветный фон

  1. 1 Одноцветный фон – самый основной тип фонов, который можно поставить на веб-сайт. На самом деле, каждый веб-сайт создается на белом фоне. Тем не менее, в то время как белый фон может быть очень приятный на вид и не раздражающий, некоторые предпочитают цветной фон с различными темами и рисунками. http://pad3.whstatic.com/images/thumb/b/b9/Add-a-Background-to-a-Website-Step-1-preview.jpg/550px-Add-a-Background-to-a-Website-Step-1-preview.jpg http://pad1.whstatic.com/images/thumb/b/b9/Add-a-Background-to-a-Website-Step-1-preview.jpg/300px-Add-a-Background-to-a-Website-Step-1-preview.jpg http://d5kh2btv85w9n.cloudfront.net/1/1f/Add a Background to a Website Step 1.360p.mp4
  2. 2 Откройте исходный код страницы (source). http://pad3.whstatic.com/images/thumb/2/2c/Add-a-Background-to-a-Website-Step-2-preview.jpg/550px-Add-a-Background-to-a-Website-Step-2-preview.jpg http://pad3.whstatic.com/images/thumb/2/2c/Add-a-Background-to-a-Website-Step-2-preview.jpg/300px-Add-a-Background-to-a-Website-Step-2-preview.jpg http://d5kh2btv85w9n.cloudfront.net/2/24/Add a Background to a Website Step 2.360p.mp4

В тексте кода напишите bgcolor. Теперь текст будет выглядеть так -<body bgcolor="НАЗВАНИЕЦВЕТА"> в поле НАЗВАНИЕЦВЕТА (COLORNAME) введите название цвета на английском. Например -

  1. 1
    • <body bgcolor="red">(цвет)
    • <body bgcolor="#FF0000">(номер)
    • <body bgcolor="rgb(255, 8, 9)">(значение RGB)
  2. 2 Экспериментируйте со значением RGB и у вас получится много различных оттенков. Помните, что цвета надо вводить правильно и на английском. http://pad2.whstatic.com/images/thumb/9/99/Add-a-Background-to-a-Website-Step-4-preview.jpg/550px-Add-a-Background-to-a-Website-Step-4-preview.jpg http://pad2.whstatic.com/images/thumb/9/99/Add-a-Background-to-a-Website-Step-4-preview.jpg/300px-Add-a-Background-to-a-Website-Step-4-preview.jpg http://d5kh2btv85w9n.cloudfront.net/8/8d/Add a Background to a Website Step 4.360p.mp4

Изображение в качестве фона

  • Добавить изображение в качестве фона сложнее, чем одноцветный фон.

Добавьте такое значение в код -<body background="SRC">, где SRC это исходный файл или ссылка на местоположение изображения.

  1. 1
    • <body background="red.gif">(в той же папке)
    • <body background="Folder1 ed.gif">(в другой папке)
    • <body background="imagepage1/red.gif">(в интернете)
  2. 2 Помните, что нужно вводить изображения в формате .gif/ .jpeg /.bmp. http://pad3.whstatic.com/images/thumb/1/10/Add-a-Background-to-a-Website-Step-6-preview.jpg/550px-Add-a-Background-to-a-Website-Step-6-preview.jpg http://pad1.whstatic.com/images/thumb/1/10/Add-a-Background-to-a-Website-Step-6-preview.jpg/300px-Add-a-Background-to-a-Website-Step-6-preview.jpg http://d5kh2btv85w9n.cloudfront.net/c/c4/Add a Background to a Website Step 6.360p.mp4

Метод 2 из 2: С помощью CSS

Одноцветный фон

  1. 1 Чтобы добавить одноцветный фон в CSS, добавьте атрибут стиля. Вы можете также назначить ID и класс и использовать как внешние, так и внутренние примеры стилей. http://pad3.whstatic.com/images/thumb/f/f5/Add-a-Background-to-a-Website-Step-7-preview.jpg/550px-Add-a-Background-to-a-Website-Step-7-preview.jpg http://pad2.whstatic.com/images/thumb/f/f5/Add-a-Background-to-a-Website-Step-7-preview.jpg/300px-Add-a-Background-to-a-Website-Step-7-preview.jpg http://d5kh2btv85w9n.cloudfront.net/3/39/Add a Background to a Website Step 7.360p.mp4
  2. 2 Текст кода должен выглядеть так - http://pad1.whstatic.com/images/thumb/1/11/Add-a-Background-to-a-Website-Step-8-preview.jpg/550px-Add-a-Background-to-a-Website-Step-8-preview.jpg http://pad1.whstatic.com/images/thumb/1/11/Add-a-Background-to-a-Website-Step-8-preview.jpg/300px-Add-a-Background-to-a-Website-Step-8-preview.jpg http://d5kh2btv85w9n.cloudfront.net/d/d2/Add a Background to a Website Step 8.360p.mp4
    • <body style="background-color: COLORNAME;">
      , где COLORNAME это название цвета, его номер или его RGB .

Добавление изображения

  1. 1 Чтобы добавить изображение, добавьте атрибут стиля в исходный код. Вы можете назначать ID и классы, а также использовать как внешние, как и внутренние примеры стилей. http://pad3.whstatic.com/images/thumb/7/7f/Add-a-Background-to-a-Website-Step-9-preview.jpg/550px-Add-a-Background-to-a-Website-Step-9-preview.jpg http://pad1.whstatic.com/images/thumb/7/7f/Add-a-Background-to-a-Website-Step-9-preview.jpg/300px-Add-a-Background-to-a-Website-Step-9-preview.jpg http://d5kh2btv85w9n.cloudfront.net/f/f9/Add a Background to a Website Step 9.360p.mp4
  2. 2 Код должен выглядеть так - http://pad2.whstatic.com/images/thumb/5/5d/Add-a-Background-to-a-Website-Step-10-preview.jpg/550px-Add-a-Background-to-a-Website-Step-10-preview.jpg http://pad1.whstatic.com/images/thumb/5/5d/Add-a-Background-to-a-Website-Step-10-preview.jpg/300px-Add-a-Background-to-a-Website-Step-10-preview.jpg http://d5kh2btv85w9n.cloudfront.net/5/52/Add a Background to a Website Step 10.360p.mp4
    • <body style="background-image:url('SRC'); ">
  3. 3 Помните, что SRC это исходное местоположение изображения. Например, папка или ссылка. http://pad3.whstatic.com/images/thumb/0/0f/Add-a-Background-to-a-Website-Step-11-preview.jpg/550px-Add-a-Background-to-a-Website-Step-11-preview.jpg http://pad1.whstatic.com/images/thumb/0/0f/Add-a-Background-to-a-Website-Step-11-preview.jpg/300px-Add-a-Background-to-a-Website-Step-11-preview.jpg http://d5kh2btv85w9n.cloudfront.net/3/36/Add a Background to a Website Step 11.360p.mp4
    • <body style="background-image:red.gif;">(в той же папке)
    • <body style="background-image:Folder1 ed.gif">(в другой папке)
    • <body style="background-image:imagepage1/red.gif">(ссылка на страницу в интернете).
  4. 4Помните, что нужно указать имя файла и расширение.

Повторить изображение фона несколько раз

Чтобы сделать фон с повторением одного изображения или узора, измените код на -<body style="background-image: url('SRC'); background-repeat:REPEAT-SETTINGS; "> Где REPEAT-SETTINGS это настройки повторения изображения. Например-

  1. 1
    • <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;">(Повтор изображения вертикально.)

Изображение, которое не прокручивается

  1. 1 Изображение, которое не прокручивается, когда вы просматриваете нижнюю или верхнюю часть сайта. Вот код -
    • <body style="background-image:url('SRC'); background-attachment:fixed; background-position:POSITION; background-repeat:REPEAT SETTINGS;">
      , где SRC это исходная папка с изображением, POSITION это позиция изображения (например, центр, верх, низ); background – тип фона.

Советы

  • Прочитайте статью полностью.

Предупреждения

  • В HTML 4.01 и в XHTML этот метод может не сработать.
Категория: Вопросы и ответы | Просмотров: 545 | | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]