Некоторый синтаксис фона в CSS CSS
Автор:Eve Cole
Время обновления:2009-06-09 20:25:11
CSS-описание
background-image:url("URL-адрес фонового изображения");
фон: url("URL изображения");
цвет фона: # код цвета фона;
Опыт:
фоновое изображение:url(фоновый узор.jpg,gif,bmp);
цвет фона: #FFFFFF;
фоновый цвет: прозрачный <--Установить прозрачный цвет фона;
-------------------------------------------------- ----------------------------------
Background-repeat изменяет повторяющуюся настройку фоновых изображений рядом друг с другом.
CSS
иллюстрировать
повторять фоновые изображения рядом
фоновые изображения с повтором-x располагаются рядом в направлении X.
повторяющиеся фоновые изображения располагаются рядом в направлении Y.
неповторяющиеся фоновые изображения не обрабатываются параллельно
Опыт:
фоновое изображение:url("/u/info_img/2009-06/09/xx.gif");
фоновое повторение: без повторения;
Используйте эту картинку в качестве фона. Если размера картинки недостаточно, не повторяйте ее рядом.
-------------------------------------------------- ----------------------------------
Исправляет ли вложение фона положение изображения
CSS
иллюстрировать
прокрутка Когда прокрутка вытянута, фоновое изображение будет перемещаться соответствующим образом (значение по умолчанию)
исправлено Фоновое изображение не перемещалось при прокрутке.
Опыт:
фоновое изображение:url("/u/info_img/2009-06/09/xx.gif");
фоновое повторение: без повторения;
фоновое вложение: исправлено;
Фоновое изображение в /u/info_img/2009-06/09/xx.gif не повторяется и не накладывается друг на друга и не перемещается при прокрутке.
-------------------------------------------------- ----------------------------------
Позиция фона-позиция по длине: x y
Использовать процентное позиционирование
CSS
иллюстрировать
x% двигаться вправо
y% двигаться вниз
backgroud-position: 0% 0% вверху слева;
backgroud-position: 0% 50% слева по центру;
backgroud-position: 50% 0% над центром;
фоновое положение: 50% 50%;
backgroud-position:100% 0% вверху справа;
backgroud-position: 0% 100% внизу слева;
backgroud-position: 100% 50% посередине справа;
фоновое положение: 50% 100% среднее и нижнее;
backgroud-position: 100% 100% внизу справа;
Таргетинг с ключевыми словами
Ключевое слово Описание
верх ( у = 0 )
центр ( x = 50, y = 50 )
внизу ( у = 100 )
влево влево ( x= 0 )
Опыт:
фоновая позиция: центр;
Изображение находится в положении X=50% Y=50% в центре указанного фона.
позиция фона: 200 пикселей 30 пикселей