Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - background-size.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Свойство background-size изменяет( масштабирует) фоновое изображение согласно заданным размерам ширины - width="..." и высоты - height="...". Когда установлено одно значение, тогда оно задает ширину фона. Когда уустановлено второе значение, тогда принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

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


Синтаксис:

                  background-size: auto|length|cover|contain|intial|inherit;

Определение и Использование

Значение по умолчанию: auto
наследует: нет
Версия: CSS3
JavaScript синтаксис: object.style.backgroundSize="60px 120px"


Свойства Значения

Значение Описание
auto Значение по умолчанию. Фоновое изображение background-Image содержит его ширину и высоту
length Устанавливает ширину и высоту изображения фона. Первый параметр задает ширину второй параметр задает высоту. Если задано только одно значение, то второй имеет значение "авто"
percentage Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первый параметр задает ширину второй параметр задает высоту. Если задано только одно значение, то второй имеет значение "авто"
cover Масштабирует фоновую картинку, чтобы быть как можно больше, так что фон полностью покрыт фоновым изображением. Некоторые части фонового изображения могут не быть в поле зрения в пределах фона
contain Масштабирование изображения до самых больших размеров, таких, чтобы ширина и высота могли поместиться в области содержимого
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу - Указать размер фонового изображения:

< !DOCTYPE html>
< html>
< head>
< style> 
div#rr
{
background:url(../fon/16526.jpg);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
< /style>
< /head>
< body>
< p>
Сайт "Суть слова" насчитывает более двух тысяч страниц, из них более трехсот 
страниц уникального текста о сути древних слов с момента зарождения жизни и 
до настоящего времени развития человечества. Сайт создан по основным 
тематическим направлениям. В первой колонке с названием "Суть слова" даются 
расшифровки сути исторических слов на базе изучения древнего языка наших 
предков, уходящих в глубину веков и приводящий нас к третьему сыну Ноя Хаму
( и поэтому назван этот язык хамским - современный чувашский язык). 
< /p>

< p>Исходное изображение: < img src="../fon/16526.jpg" alt="Обшивка двери">< /p>

< /body>
< /html>                     

Результат программы:

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

Исходное изображение: Обшивка двери




seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: