Jump to content
  • 0

Вывод более одного изображения посредствои css


rafaello9
 Share

Question

Прочитал в учебнике css, что через background или background-image можно вывести более одного изображения. Никак не могу применить этот момент на практике.

Дело в том, что мне необходимо оформить боковую вертикальную колонку, вынесенную отдельным блоком через <div></div>. Причем, нельзя использовать вставку картинок посредством html (это связано с некоректным отображением сайта в мобильных устройствах).

В самом верху надо вывести одну угловую картинку, а потом, под ней или как, вторую. Причем вторая картинка - это квадратик, который повторяется по вертикали. Тем самым, при растягивании основного макета, боковая колонка вытягивается соответственно.

Каким образом можно, использую только css вывести в верхнем углу одну картинку, а второй залить пространство до низу?

И второй вопрос. Почему, если выводить картинку в виде фона, как backround, то качество ее понижается по сравнению с тем, если ее вывести просто через html. И как можно исправить это?

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

Каким образом можно, использую только css вывести в верхнем углу одну картинку, а второй залить пространство до низу?

Так?

http://jsfiddle.net/fainz777/Xsu5p/

И второй вопрос. Почему, если выводить картинку в виде фона, как backround, то качество ее понижается по сравнению с тем, если ее вывести просто через html. И как можно исправить это?

В img выносятся картинки относящиеся к контенту и несущие смысл. Все остальные, касающиеся фона задаются в CSS через свойство background

И что значит понижается качество? Хотелось бы увидеть пример.

Link to comment
Share on other sites

  • 0

Здорово! То что надо, а то голову поломал. Спасибо!

А в приведенном примере, за счет чего картинка земного шара поверх другой, которая повторяется?

Link to comment
Share on other sites

  • 0

Так открыл и посмотрел - XY*

XY-хромосомы?

Если нет, то напомню, что мат. в т.ч. завуалированный на форуме запрещен.

Это первое.

Второе. Чудес не бывает. Если хочешь, чтобы работало в ИЕ8 и ниже - используй обертки. либо оставляй для него какой-либо один фон.

Link to comment
Share on other sites

  • 0

Чудес не бывает. Если хочешь, чтобы работало в ИЕ8 и ниже - используй обертки. либо оставляй для него какой-либо один фон.

Так я-то это знаю. А вот товарища rafaello9 твой ответ ввел в заблуждение. Которое раскроется, когда к нему на сайт зайдет посетитель через IE8 и увидит совсем не то, что задумано.

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

Link to comment
Share on other sites

  • 0

категорически не согласен.

чем быстрее разработчики будут опираться на новые стандарты без оглядки на какашки от мелкомягких, тем лучше.

Для кого лучше? Для проекта, который потеряет 20% клиентов?

Сайт - это в первую очередь - инструмент для бизнеса, а не хомячок директора компании. И чем быстрее разработчики это поймут, тем раньше они станут делать качественные продукты.

Link to comment
Share on other sites

  • 0
Для проекта, который потеряет 20% клиентов?

корпоративный сайт и любой другой вебресурс это совершенно разные вещи.

инструмент для бизнеса

:facepalmxd: зачем делать говнокод под ie, если для определенных проектов доля посещений составляет меньше 5%?

хочешь посетить сайт - поставь нормальный браузер.

Link to comment
Share on other sites

  • 0

:facepalmxd: зачем делать говнокод под ie, если для определенных проектов доля посещений составляет меньше 5%?

хочешь посетить сайт - поставь нормальный браузер.

Как разработчик, я с удовольствием бы с тобой согласился. Но, ставя себя на место своего клиента, не могу этого сделать.

По поводу 5% - это большая натяжка. Для IT ресурсов это может и так. Но, в различных сферах этот процент может быть в разы выше. А многим людям просто не хочется думать, что вообще такое браузер. Они нажимают кнопку "Интернет" и работают с вашим сайтом - это норма. Но, у них может быть много денег, с которыми они готовы расстаться ради качественного продукта.

В общем, что я тут рассказываю. Когда у тебя будет семья, которой надо питаться и где-то жить, ты поймешь, что размер успешности для твоих коллег и семьи измеряется твоим заработком, а не тем, на сколько крутое CSS5 правило удалось применить.

Link to comment
Share on other sites

  • 0

Изящная деградация и всё такое... умным и современным — красивый мультифон, "старым, но не сдающимся" — спартанскую одноцветную заливку.

В принципе, конкретно для IE8 мультифон можно эмулировать через псевдоэлементы. Но большого смысла нет, т.к. Гугл вот-вот даст этому экс-браузеру "спартанского" же пинка:

396.jpg

  • Like 1
Link to comment
Share on other sites

  • 0

Изящная деградация и всё такое... умным и современным — красивый мультифон, "старым, но не сдающимся" — спартанскую одноцветную заливку.

В принципе, конкретно для IE8 мультифон можно эмулировать через псевдоэлементы. Но большого смысла нет, т.к. Гугл вот-вот даст этому экс-браузеру "спартанского" же пинка:

396.jpg

Напомню, что в нашей стране знают, что такое гугл, не более 30% пользователей интернета. Пользуются сервисами гугла того меньше.

Почему все всегда смотрят на то, что твориться на западе, но постоянно забывают про калчер референс? Кстати те, кто про него не забывают, а на него ориентируются, и добиваются заметно больших успехов.

Link to comment
Share on other sites

  • 0

Вчера этот вариант у меня не прошел по причине того, что размер статичной картинки по ширине больше, чем div-блок. Этот момент я не смог решить, а именно... Внутри одного css-правила, когда значению backround присваиваются две картинки, я не смог спозиционировать одну статичную картинку(ее ширина больше блока div)

Пришлось применить другой способ(подсказали на другом форуме)

Внутри div-блока я определил еще один div-блок, и во внутреннем блоке посредством margin вывел статичную картинку туда, куда надо.

Такой способ, поддерживают IE8. Проверил.

Link to comment
Share on other sites

  • 0
в нашей стране знают, что такое гугл, не более 30% пользователей интернета

Откуда такие пессимистичные цифры? К сервисам гугла, на минуточку, относится не только GMail, но и youTube, а есть еще набирающие популярность андроиды... Не говоря уже о том, что наиболее калчер-референсная статистика безвозвратно опустила IE8 ниже плинтуса 5%-ного порога значимости.

Внутри div-блока я определил еще один div-блок, и во внутреннем блоке посредством margin...

Такой способ и IE7 поддерживает :)

  • Like 1
Link to comment
Share on other sites

  • 0

Откуда такие пессимистичные цифры? К сервисам гугла, на минуточку, относится не только GMail, но и youTube, а есть еще набирающие популярность андроиды... Не говоря уже о том, что наиболее калчер-референсная статистика безвозвратно опустила IE8 ниже плинтуса 5%-ного порога значимости.

Да, давно мне счетчик liveinternet в пример не ставили. Видать, он стал очень крут.

Внутри div-блока я определил еще один div-блок, и во внутреннем блоке посредством margin вывел статичную картинку туда, куда надо.

Такой способ, поддерживают IE8. Проверил.

Совершенно верно. Но, можно было вторую картинку задать так же фоном для внутреннего div


<div class="background1">
<div class="background2"></div>
</div>

А далее сам фон у внутреннего div можно позиционировать как угодно.

Link to comment
Share on other sites

  • 0
Видать, он стал очень крут.

Очень или не очень — не берусь судить, но список наиболее популярных сайтов и кол-во посещений по ним лично меня впечатляет. Кстати, у лидера таблицы — "вконтактика" — всего 2% посещений с IE8, у открывающего вторую десятку Кинопоиска — того меньше.

Openstat и StatCounter, правда, показывают пока не такие оптимистичные цифры... но у них и объем выборки ощутимо поменьше (у второго — похоже, вообще неизвестен).

можно позиционировать как угодно

Почти как угодно. На заданное расстояние от правого или нижнего края всё-таки так не отодвинуть.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy