• Страница 1 из 1
  • 1
Форум » Форум веб мастеров » html & css » Как вырезаются картинки через css?
Как вырезаются картинки через css?

Voker
VIP
Сообщений 2579
+
+9993
-
Ваши награды 25
У меня такой вопрос.Вот для примера ксс

Code
.viewn_bottom {height:24px; padding:12px 0 0 28px; overflow:hidden; font-size:10px; color:#f6f6f6; text-shadow:1px 1px 1px #818181; background:#3A9232 url(http://mp3shka.ucoz.ua/viewn_bg.png) no-repeat -1002px bottom;}  
  .viewn_bottom b {margin:0 8px 0 0;}  
  .viewn_bottom a {color:#f6f6f6; text-shadow:1px 1px 1px #818181; text-decoration:none;}  
  .viewn_bottom a:hover {text-decoration:underline;}  
  .viewn_link {width:101px; height:21px; float:left; margin:-3px 26px 0 0;}  
  .viewn_link a {width:93px; height:21px; line-height:21px; padding:0 0 0 8px; display:block; font-size:10px; color:#6e6e6e; text-shadow:none; text-decoration:none; background:#fefefe url(http://www.csomsk.ru/1-ucoz/rip/viewn_bg.png) no-repeat -1505px 0;}  
  .viewn_link a:hover {text-decoration:none; background-position:-1505px -23px;}


И там картинка стоит

Но там же не одна картинка там их несколько как оперделяеться что и куда вставлять!?
подпись:
Voker
«Пред. тема След. тема»

Supermenыч
Проверенные
Сообщений 335
+
+213
-
Ваши награды 6
ну вот видищь это: background-position:-1505px -23px; вот здесь задается положение картинки в пикселах -1505---по оси Х -23---- по оси У

пример:

<style>
body{
background:#404040;
}
.position{
background:url(http://erky.ru/diz/add_mems.png);
max-width:300px;
height:120px;

}
.position:hover{
background-position:0 -121px;
cursor:pointer;
}
</style>
<div class="position"></div>
подпись: HTML ~ 75%
CSS ~ 70%
------------------------------------
Ничто не истинно, всё дозволено... Supermenыч

Sid_MC_aka_Destroy
Пользователи
Сообщений 181
+
+67
-
Ваши награды 8
картинка стоит на bg.
выравниваетс ся с помощью background-position.
Приведу пример.
Допустим, у нас есть изображение img.png. Нпример, сверху изображения (0 пикс. от верха) во всю ширину расположена 1 картинка. Под ней идёт вторая. Пусть высота первой = 62 пикс.
Нам нужно, чтобы элемент с определённым классом (например knopka) имел фоновую картинку 1, а при наведении (hover) - 2.
Пропишем стили.
Quote

.knopka {
background: url('http://сайт/img.png');
background-position: 0px 0px;
}
.knopka:hover {
background: url('http://сайт/img.png');
background-position: 0px -62px;
}


Первое значение background-position: 0px - горизонтальный отступ. (-#px - # пикс слева)
Второе значение background-position: -62px - вертикальный отступ. (-#px - # пикс сверху)
Желательно так же указать чёткий размер элемента (width, height)

Вот примерно так можно вывести определённую часть изображения, а лишнее спрятать happy
подпись:
Sid_MC_aka_Destroy
Форум » Форум веб мастеров » html & css » Как вырезаются картинки через css?
  • Страница 1 из 1
  • 1
Поиск:
Друзья сайта:
Связаться с администратором для дружбы! В Вовчик
Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
Web-мастер системы uCoz R Roman_Domnin
Связаться с администратором для дружбы! В Вовчик
Связаться с администратором для дружбы! В Вовчик
Топ пользователей: