Форум hotibo.ru
Сайты - по стандартам, но не стандартные сайты!
#1 07.05.2012 13:29
- tatishka
- Новичок
- Зарегистрирован: 07.05.2012
- Сообщений: 1
Рамка картинкой вокруг img
Как сделать рамку картинкой вокруг элемента img, чтобы она его обтекала?
Нет на форуме
#2 08.05.2012 11:00
- zascia
- Новичок
- Зарегистрирован: 23.11.2011
- Сообщений: 39
Re: Рамка картинкой вокруг img
допустим у Вас есть картинка 100Х100, которую нужно одеть в красивую рамку. Рисуете в фотошопе изображение, немного большее картинки по размерам и нужной формы, в стилях пишете класс
.img_bg
{
width: 109px;
height: 104px;
background: url('изображение-рамка.gif') no-repeat;
}
а внутри дива будет картинка 100Х100
с отступами у картинки поиграетесь, чтобы она стала там, где нужно
Нет на форуме
#3 04.11.2013 13:39
- Defender
- Новичок
- Зарегистрирован: 04.11.2013
- Сообщений: 1
Re: Рамка картинкой вокруг img
Добрый день!
Вот мучаюсь уже день, оешения не могу найти. Помогите пожалуйста.
Задача следующая.
Есть картинка известной ширины (300 пикселей), но неизвестной высоты (высота может быть разной). Необходимо обрамить ее справа и снизу рамкой-картинкой. Эта рамка-картинка разбита на пять частей: правая верхняя, правая, правый нижний угол, нижняя левая, нижняя. Пытаюсь это сделать с помощью таблицы и распихать куски рамки бекграундами.
Код:
В Опере, Сафари и Хроме все работает правильно:
Но в ИЕ и ФФ видим следующее:
Т.е. тупо не сохрянется высота правой верхней ячейки. background-repeat: no-repeat не поможет.
Нет на форуме
#4 06.11.2013 04:33
- minty
- Новичок
- Зарегистрирован: 06.11.2013
- Сообщений: 1
Re: Рамка картинкой вокруг img
Defender, а в Вашем случае экономнее будет сделать вот так:
1. Сохранить картинки Верх.Прав. и Правую в одну с высотой, скажем 1000пх, ведь по высоте картинка уж наверняка больше не будет.
2. Написать это дело в такой вот код:
3. CSS
.image{background: transparent url('место нахождения правой картинки') right top no-repeat;}
.image img{margin: 0 10px 0 0;}
.image .footer{background: тут прописываешь для нижней "рамки";}
примерно вот так вот.
Отредактированно minty (06.11.2013 04:34)
Нет на форуме