ГЛАВНАЯ     АРХИВ     НАПИСАТЬ АДМИНУ     ПОДПИСАТЬСЯ НА RSS     ВОЙТИ      

Поиск

Категории

Облако тегов

  << Предыдущий пост       Следующий пост >>  
От: 4aIIaeB
22. февраля 2012 13:10

Недавно я раскопал интересное решение на одной из страниц моих клиентов. Они хотели добавить несколько фоновых картинок к элементу. Как сказано в этом документе, это вполне возможно сделать в CSS.

div {
background-image: url(images/emo.jpg) url(images/icon068.gif);
}

однако не все браузеры поддерживают эту возможность.

Поковыряв этот подход, я разработал кроссбраузерное решение. Фокус сотоит в том, чтобы поместить точно такой же элемент внутри родительского, в нашем случае, поместим div внутри div-а.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">

<
head>
<
meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<
title>Multiple Background Images</title>
<
style type="text/css">

#outerDiv
{
height:100px;
width:100px;
background-image: url(images/emo.jpg);
background-repeat: repeat-x;
}
#innerDiv
{
height:80px;
width:100px;
background-image: url(images/icon068.gif);
background-repeat: repeat-x;
}

</style>
</
head>

<
body>
<
div id="outerDiv">
<
div id="innerDiv">

</
div>
</
div>
</
body>

</
html>



Вывод браузера показан ниже. Одно изображение помещено поверх другого. Для перекрытия родительского изображения, измените ширину с 100px до 80px:

image



Это перевод. Оригинал здесь.

Похожие записи


Вопросы на собеседовании C#, Net, ASP.NET, SQL
Продолжая тему вопросов на собеседовании. Нашел еще одну подборку. Оригинал лежит здесь . Перенес, чтобы не затерялось. Есть вполне вменяемые ответы (хотя, на некоторые вопросы ответил бы по-другому). Ответы находятся после списка вопросов, я их не менял. 23. Что такое шаблон проектирования Model/View/Controller? Как и зачем его применяют? 2...

Как выровнять несколько div-ов используя класс CSS ?
Очень частый вопрос который задают на форумах, это как выровнять множество div-ов, используя класс CSS. Здесь пример того как это сделать. Для простоты я буду выравнивать 3 div-а. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><hea...

Как сделать 3-х колоночный дизайн сайта c заголовком и подвалом (HTML/CSS) ?
Я не дизайнер. Но это не остановит меня от попытки, когда я выполняю дизайнерскую работу. Как-то помог коллеге с работой дизайнера, когда ему потребовалось сделать 3-х колоночный вывод с шапкой и подвалом. Одним из требований была автоматическая подстройка дизайна к контенту. Мы нашли приемы в наборе скачанных статей. Вот что было там:<!DOCTYPE html PUBLIC "-//...

Добавить комментарий




biuquote
  • Комментарий
  • Предпросмотр
Loading


  Сохранить комментарий