Немного о CSS свойством «background-image»
CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым рисунком. Что можно сделать, используя это свойство?
Используется оно так:
В этом случае всю страницу «замостит» нашим рисуночком, примерно так, как плиткой в ванной комнате.
Но фоновый рисунок можно использовать и однократно, расположив его в нужном нам месте страницы. Для этого используются CSS свойства « background-repeat » и « background-position ».
Используя « background-repeat » мы можем использовать фоновый рисунок однократно— « background-repeat: no-repeat ;» или размножив по горизонтали или вертикали— « background-repeat: repeat-x ;» и « background-repeat: repeat-у ;». Первый вариант размножает рисунок по горизонтали, второй— по вертикали.
Используя CSS свойство « background-position » мы можем задать координаты начала нашей заливки. Используется так:
В данном случае заливка начнется от верхнего левого угла страницы. Значения можно задать, кроме того, в пикселах или процентах— « background-position: 200 100 ;» Отсчёт ведётся от верхнего левого угла страницы (или блока).
При совместном использовании « background-repeat » и « background-position » имейте ввиду, что не все будет работать, как ожидаете. Например « background-repeat:repeat-у » и « background-position: 100 100 » выдаст вам вертикальную полосу с вашим рисунком, отстоящую от левого края страницы на 100 пикселей. Начать размножение с заданного значения 100 пикселей по вертикали не удастся.
Кроме того, довольно интересно работает заливка рисунками, которые больше ширины страницы. Порой совершенно неожиданно...
Теперь о интересном :)
На сайте был материал об использовании нескольких классов CSS применительно к одному объекту. Как применить несколько классов к одному объекту смотрим на этой странице . Недавно возникла мысль использовать эту возможность для создания кнопочек на сайте в виде вкладок. Обычные вкладочки в виде ярлычков с закругленными уголками... Эдакое CSS меню сделать...
Простая идея сделать три класса с разными фонами (два уголка— правый и левый, серединка как заливка всей кнопочки) и применить все три класса к одному блоку потерпела фиаско.
По идее, ожидаемо, описания одного класса просто перешибают описания предыдущего...
Возникла тогда идея сделать все с использованием вложенных DIV-ов. Примерно как при использовании таблиц— один фоновый рисунок на таблицу, и свои для ячеек.
Теоретически, всё должно работать— вкладываем друг в друга три блока, в самом первом (наружном) прописываем « background-repeat: repeat-y ;» и используем серединку нашей кнопочки, в последующих « background-repeat: no-repeat ;» и « background-position: left top ;» и « background-position: right top ;» с использованием уголков.
В итоге родилось:
Не лучший вариант, как оказалось... иногда, конечно, можно использовать. Если заранее знать, что текст в кнопках будет короче самой кнопки. Подозреваю, что и тут можно разобраться и заставить всё работать...
оригинал статьи: style-css.ru
Используется оно так:
background-image: url(men1-1.jpg);В этом случае всю страницу «замостит» нашим рисуночком, примерно так, как плиткой в ванной комнате.
Но фоновый рисунок можно использовать и однократно, расположив его в нужном нам месте страницы. Для этого используются CSS свойства « background-repeat » и « background-position ».
Используя « background-repeat » мы можем использовать фоновый рисунок однократно— « background-repeat: no-repeat ;» или размножив по горизонтали или вертикали— « background-repeat: repeat-x ;» и « background-repeat: repeat-у ;». Первый вариант размножает рисунок по горизонтали, второй— по вертикали.
Используя CSS свойство « background-position » мы можем задать координаты начала нашей заливки. Используется так:
background-position: left top;В данном случае заливка начнется от верхнего левого угла страницы. Значения можно задать, кроме того, в пикселах или процентах— « background-position: 200 100 ;» Отсчёт ведётся от верхнего левого угла страницы (или блока).
При совместном использовании « background-repeat » и « background-position » имейте ввиду, что не все будет работать, как ожидаете. Например « background-repeat:repeat-у » и « background-position: 100 100 » выдаст вам вертикальную полосу с вашим рисунком, отстоящую от левого края страницы на 100 пикселей. Начать размножение с заданного значения 100 пикселей по вертикали не удастся.
Кроме того, довольно интересно работает заливка рисунками, которые больше ширины страницы. Порой совершенно неожиданно...
<style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; /*примеры использования свойства "background-image" в CSS*/ /*используется фоновый рисунок 100х100px-фоновый рисунок меньше ширины страницы*/ /*полная заливка фоновым рисунком */ /* background-image: url(fon1.gif); */ /*заливка фоновым рисунком по вертикали*/ /* background-image: url(fon1.gif); background-repeat: repeat-y; background-position: left top; */ /*заливка фоновым рисунком по горизонтали*/ /* background-image: url(fon1.gif); background-repeat: repeat-x; background-position: left top; */ /* попытка размножить фоновый рисунок с заданного места по горизонтали- не совсем удачно*/ /* background-image: url(fon1.gif); background-repeat: repeat-x; background-position: 100px 100px; */ /*размножение фонового рисунка по вертикали */ /* background-image: url(fon1.gif); background-repeat: repeat-y; background-position: 100px; */ /* пример использования свойства "background-image" в CSS*/ /*используется рисунок 1600х5px- в результате вся страница заливается одним рисунком*/ /* background-image: url(fff1.jpg); background-position: 100px; */ } --> </style>Теперь о интересном :)
На сайте был материал об использовании нескольких классов CSS применительно к одному объекту. Как применить несколько классов к одному объекту смотрим на этой странице . Недавно возникла мысль использовать эту возможность для создания кнопочек на сайте в виде вкладок. Обычные вкладочки в виде ярлычков с закругленными уголками... Эдакое CSS меню сделать...
Простая идея сделать три класса с разными фонами (два уголка— правый и левый, серединка как заливка всей кнопочки) и применить все три класса к одному блоку потерпела фиаско.
По идее, ожидаемо, описания одного класса просто перешибают описания предыдущего...
Возникла тогда идея сделать все с использованием вложенных DIV-ов. Примерно как при использовании таблиц— один фоновый рисунок на таблицу, и свои для ячеек.
Теоретически, всё должно работать— вкладываем друг в друга три блока, в самом первом (наружном) прописываем « background-repeat: repeat-y ;» и используем серединку нашей кнопочки, в последующих « background-repeat: no-repeat ;» и « background-position: left top ;» и « background-position: right top ;» с использованием уголков.
В итоге родилось:
<style type="text/css"> <!-- #knop { margin: 0px; padding: 0px; width: 120px; height: 20px; } .k1 { background-image: url(men1-1.jpg); background-repeat: no-repeat; background-position: left top; } .k2 { background-image: url(men1-3.jpg); background-repeat: repeat-x; background-position: left top; } .k3 { background-image: url(men1-2.jpg); background-repeat: no-repeat; background-position: right top; } #knop2 { margin: 0px; height: 20px; width: 120px; padding: 0px; text-align: center; vertical-align: middle; } #knop3 { padding: 0px; margin-right: 10px; margin-left: 10px; } --> </style> <body> <p> </p> <!--заливка одним фоном --> <div class="k2 k1" id="knop" >ooo</div><br /> <!--заливка двумя фоновыми рисунками --> <div class="k2" id="knop" ><div class="k1" id="knop" >ooo</div></div><br /> <!--заливка тремя фоновыми рисунками- работает при задании точного и одинакового размера всем трем блокам --> <div class="k2" id="knop" > <div class="k1" id="knop" > <div class="k3" id="knop2" > oohhhhhhhhh </div> </div> </div> <br /> <!--заливка тремя фоновыми рисунками с четвертым блоком с заданием в нем отступов- работает работает корректно в эксплорере --> <div class="k2" id="knop" > <div class="k1" id="knop" > <div class="k3" id="knop2" > <div id="knop3">oohhhhhhhhhhhhhhhhhhhho</div> </div> </div> </div> <br /> </body>Не лучший вариант, как оказалось... иногда, конечно, можно использовать. Если заранее знать, что текст в кнопках будет короче самой кнопки. Подозреваю, что и тут можно разобраться и заставить всё работать...
оригинал статьи: style-css.ru
1 Комментарии