Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей.
ЛАБОРАТОРНАЯ РАБОТА №3. Работа с фоновыми изображениями при помощи CSS Создайте различные html-документы, применяя готовые CSS-стили, встраивая их в тег HEAD. Напишите при помощи комментариев в html-коде, какие свойства каких объектов задает каждый стиль. Наполните документ соответствующим содержимым. После этого создайте на основе примеров несколько html-документов с собственными настройками фоновых изображений через CSS. Параметры CSS для фона определяют фоновые эффекты элемента.
Примеры Данный пример показывает, как задать фоновый цвет элемента. <html><head><style type="text/css">ul {background-color: rgb(200,10,200)}ol {background-color: #00FFFF}li {background-color: transparent}p {background-color: blue}</style></head> <body><ul><li>this is ul</li></ul><ol><li>this is ol</li></ol><p>This is a paragraph</p></body></html>Данный пример показывает, как задать в качестве фона изображение. <html><head><style type="text/css">body {background-image:url(picture.jpg)}</style></head><body> В документе в качестве фона использовано изображение</body></html>Данный пример показывает, как использовать повторяющееся фоновое изображение. <html><head><style type="text/css">body{ background-image: url(picture.jpg);background-repeat: repeat}</style></head><body>В документе в качестве фона использовано повторяющееся изображение</body></html>Данный пример показывает, как использовать повторяющееся только по вертикали фоновое изображение. <html><head><style type="text/css">body{ background-image: url(picture.jpg);background-repeat: repeat-y}</style></head><body>В документе в качестве фона использовано повторяющееся изображение, которое размножается только вертикально</body></html>Данный пример показывает, как использовать повторяющееся только по горизонтали фоновое изображение.
Данный пример показывает, как разместить на странице фоновое изображение. <html><head><style type="text/css">body{ background-image: url(picture.jpg);background-repeat: repeat;background-position: bottom; }</style></head><body></body></html>Данный пример показывает, как задать фиксированное фоновое изображение, т.е. изображение, которое не будет перемещаться вместе со всей остальной страницей. <html><head><style type="text/css">body {background-image: url(picture.jpg);background-repeat: no-repeat;background-attachment: fixed}</style></head><body>Определено фиксированное фоновое изображение<br>Определено фиксированное фоновое изображение<br>Определено фиксированное фоновое изображение<br></body></html>
Читайте также: A) количество теплоты, которое получает или отдает единица массы вещества при изменении его температуры на 1К Воспользуйтесь поиском по сайту: ©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...
|