В предыдущих статьях мы представили метод объединения фоновых изображений. Но можно объединять не только фоновые изображения, но и изображения переднего плана.
На странице результатов поиска Google щелкните правой кнопкой мыши значок логотипа и сохраните его как, и вы обнаружите, что это не простой логотип Google, а сложное лоскутное изображение:
Просмотрите исходный код страницы поиска. Часть кода с логотипом выглядит следующим образом:
Пример исходного кода
[www.downcodes.com] <a id=logo href="/u/info_img/2009-06/24/nav_logo4.png" alt=""></a>
CSS-часть кода выглядит следующим образом:
Пример исходного кода
[www.downcodes.com] #logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
Анализ приведенного выше кода показывает, что родительский элемент стиля с id=logo в CSS принимает относительное позиционирование, определяет ширину и высоту и использует overflow:hidden, чтобы скрыть часть переполнения, в то время как элемент img принимает абсолютное позиционирование, используя левую и верхнюю части; для позиционирования изображения, которое соответствует позиционированию фонового изображения.
