background: url(2)

Serhij · January 18, 2008

Начал я тему, по поводу луковой шелухи, нет ответа. Значит паршивый вопрос. Спрошу ещ? разок.

Класс выводит фон под изображением с права, в результате наблюдаю, фон (нарисован уголок) отображается и смотрится.

.im {padding: 0px 21px 18px 0px; background: url(/i/im3.gif) right bottom no-repeat;}

В этот же класс пробую добавить ещ? одну картинку, что бы уголок отображался сверху с лева.

Ещ? один класс добавить возможности нет. За ранние благодарю за любую идею.

Deflate_ · January 19, 2008

.im {padding: 0px 21px 18px 0px; background: url(/i/im3.gif) right bottom no-repeat;}
В этот же класс пробую добавить ещ? одну картинку, что бы уголок отображался сверху с лева.
Ещ? один класс добавить возможности нет. За ранние благодарю за любую идею.

Сам то понял, что сказал? Покажи весь код, а то нифига не понятно!

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

Serhij · January 19, 2008

Пробую вокруг картинок разного размера сделать красивую рамку

.im {padding: 0px 21px 18px 0px; background: url(/i/im3.gif) right bottom no-repeat;}

Вот, по сути и весь код. Я действительно спросил ерунду, но очень хотелось так сделать.

Может я опять спрашиваю ерунду, но вот код:

.im {padding: 0px 21px 18px 0px; background: url(/i/im3.gif) right bottom no-repeat;}

.iml {padding: 10px 0px 0px 12px; background: url(/i/im1.gif) left top no-repeat;}

я надеялся, что будут выводится обе картинки, а выводится только из класса .iml, подскажите, пожалуйста, как правильно.

Deflate_ · January 19, 2008

Пробую вокруг картинок разного размера сделать красивую рамку
.im {padding: 0px 21px 18px 0px; background: url(/i/im3.gif) right bottom no-repeat;}
Вот, по сути и весь код. Я действительно спросил ерунду, но очень хотелось так сделать.
Может я опять спрашиваю ерунду, но вот код:
.im {padding: 0px 21px 18px 0px; background: url(/i/im3.gif) right bottom no-repeat;}
.iml {padding: 10px 0px 0px 12px; background: url(/i/im1.gif) left top no-repeat;}
я надеялся, что будут выводится обе картинки, а выводится только из класса .iml, подскажите, пожалуйста, как правильно.

Угу, второй класс перекрывает первый. Свойство "background" у элемента то только одно, и оно принимает сначало значение из первого класса, а потом перекрывается значением второго, вот почему у тебя видна только одна картинка.

Смотри, так прокатит?

<!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" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
 <meta http-equiv="Content-Language" content="ru" />
<style>
 .im {padding: 10px 0px 0px 12px; background: url(im1.gif) left top no-repeat #cccccc; display:table; width:1px; margin:0 auto 0 auto;}
 .im img {padding: 0px 21px 18px 0px; background: url(im3.gif) right bottom no-repeat;}
</style>
</head>
<body>
 <div class="im"><img src="k01.jpg" alt="" width="500" height="500" /></div>
 <div class="im"><img src="k01.jpg" alt="" width="50" height="50" /></div>
</body>
</html>

Проверил в IE6, FF и Opera.

Serhij · January 19, 2008

Спасибо Deflate_, но жаль это не совсем то, что я ищу. Поищу ещ?, или оставлю с одним уголком.

Deflate_ · January 19, 2008

Спасибо Deflate_, но жаль это не совсем то, что я ищу. Поищу ещ?, или оставлю с одним уголком.

А добавление уголка на JS или через expression тоже не подойдет?

Serhij · January 20, 2008

На JS выбрал хороший вариант, и хорошо работает. Но это, если больше ничего, с CSS, не придумаю.

Deflate_ · January 20, 2008

На JS выбрал хороший вариант, и хорошо работает. Но это, если больше ничего, с CSS, не придумаю.

Можно через css вставлять в документ JS (добавть в класс свойство "content:before", а в IE сделать через expression), который будет вставлять тот самый второй элемент со вторым фоном, в которм будет лежать картинка с двумя уголками...

Получится, что задаешь один стиль для картинки и у нее будет полноценная рамка. Кстати, не такая уж и плохая идея, думаю сделаю для себя именно так. И код останется семантическим, и меньше его станет, и читабельней...

Основная задница тут в expression, нужно их по хитрому писать, чтобы они IE не наггнули...

Скинь JS, который нашел.

Serhij · January 20, 2008

Пожалуйста http://www.dynamicdrive.com/style/csslibra...radient-shadow/

Sign In

background: url(2)

Question

Serhij

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Deflate_

Link to comment

Share on other sites

Serhij

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

Serhij

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

Serhij

Link to comment

Share on other sites

Deflate_

Link to comment

Share on other sites

Serhij

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information