В этой небольшой темке я хочу рассказать вам, о том, как можно сделать наложения изображений. Урок будет достаточно простым, но я уверен, новичкам он непременно пригодится. Итак, приступим.
#OverlayImage1 {
position: absolute;
left: 20px;
top: 20px;
width: 56px;
height: 45px;
background:url(Angel.png) no-repeat top left;
opacity:.80;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}
#OverlayImage2 {
position: absolute;
left: 40px;
top: 20px;
width: 56px;
height: 45px;
background:url(Devil.png) no-repeat top left;
opacity:.80;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
}
десь мы объявляем два идентификатора: OverlayImage1 и OverlayImage2. Не трудно догадаться, что первый будем использовать для картинки №1, а второй для изображения №2. Для каждого идентификатора я выставляю следующие свойства:
position: способ позиционирование элемента. Для нашего примера выставляем absolute, что подразумевает абсолютное позиционирование. При этом типе позиционирования, положение элемента будет определяться свойствами left, top, right и bottom.
Left, top: координаты элемента (X, Y).
Width, Height: Ширина, высота
Background: определяет стиль фона. В нашем случае, фоном будет картинка. В первом случае это angel.png, а во втором devil.png. Свойство no-repeat говорит о том, что фоновое изображение не должно повторяться.
Opacity: свойство позволяет задать уровень прозрачности для элемента.
filter: определяет набор фильтров, применяемых к элементу. В нашем примере мы используем: alpha (прозрачность) и –moz-opacity (прозрачность)
Подключаем наши стили
Стили мы описали, теперь попробуем проверить их в работе. Создайте html страницу, подключите наш CSS-файл и в теле страницы напишите:
<div></div>
<div></div>
Сохраните страницу и попробуйте ее посмотреть. Если вы не забыли создать картинки angel.png и devil.png, то вы увидите, что картинка № 2 (дьявол) наложилась на картинку №1 (ангела). Результат работы моего примера доступен в приложенном файле
Помойму легче так:
#copy {margin-top: -10px; margin-left: 80%;}
ну уж нет...не все браузеры поймут...
Не работает код? Берешь мануал, садишься за этот код, проходишь по каждой строчке и пытаешься понять зачем она и что делает. Если находишь функцию, которую ты знаешь не с точностью до каждого параметра и поведения, то идешь в мануал и читаешь про нее. Потом осознаешь что она такое и зачем там. Вот так надо учить css, а не просто копировать примеры из примеров в примеры, в надежде, что эти примеры потом будут работать.
Источник (не реклама): http://www.vr-online.ru/content/css-nalozhenie-izobrazhenij-1210
Спасибо за статью, только забыл добавить:
Written by: Антонов Игорь aka Spider_NET
DiKraven, Я Ж СЕБЕ АВТОРСТВО НЕ ПРИСВАИВАЮ...ПРОСТО ЛЕНИВЫХ МНОГО ТАК ХОТЬ ПОЧИТАЮТ КАК И ЧТО ДА МОЖ НАУЧАТЬСЯ
- 1 из 1
