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

Поиск

Категории

Облако тегов

acer ado.net amd asp.net c sharp c# cms css exceptions google html ipad iphone it бизнес javascript jquery linq microsoft mysql net nokia nokia lumia samsung seo silverlight sql surface tsql windows 8 windows blue windows phone windows rt xna безопасность библиотека вопросы на собеседовании интересные проекты интернет интернет магазин исключения книга книги компьютерная безопасность компьютерные игры контролы курсы по программированию логированние исключений мобильные приложения монетизация сайтов наушники новости новости it новости microsoft новости интернет новости технологий ноутбук ноутбуки обработка исключений оптимизация острова периферия планшет планшеты поддержка сайтов поисковое продвижение программы продвижение продвижение сайта продвижение сайтов рабство разработка игр разработка сайтов раскрутка сайта рекламные технологии смартфон смартфоны собеседование создание сайтов средства разработки туризм фриланс хостинг яндекс
  << Предыдущий пост       Следующий пост >>  
От: 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


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