Помощник
|
Border - картинка |
Kolovrat_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
yury_mw |
1.4.2012, 11:32;
Ответить: yury_mw
Сообщение
#2
|
|
Kolovrat,
стилевое свойство border не допускает использование каких-либо картинок для оформления границ блоков. Оно лишь позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Стиль — это один из вариантов: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset. (никаких картинок) Если хочется оформить границы блока с помощью изображений, то делается это по-разному, как правило, с помощью вложенных блоков-оберток, например, так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> .wrap{ background: #ccf url(картинка.jpg); padding: 5px; } .blck{ background: #fff; padding: 1em; } </style> </head> <body> <div class="wrap"><div class="blck"> Каждый охотник желает знать, где сидит фазан. </div></div> </body> </html> Чем больше изображений, тем больше блоков-оберток. Т.е. например, если хочется использовать 4 изображения (по одному на каждую из сторон блока), то потребуется 4 блока-обертки. |
|
|
Kolovrat_hb
|
Сообщение
#3
|
|
а ну с этим примерно понял спс)) пока ждал ответа нашел статью про новую функцию border-image. написано что работает не во всех браузерах. да и настраивать не очень удобно, но за то с оптимизацией проблем нету, всего пару строк и все нормально. но там реально запутаная херь, надо указывать какая область картинки должна использоваться и т.д., до сих пор не могу понять, но это меня больше впечатлило
хотя не) ваш вариант мне тоже нравится))) сначала я плохо понял как это работает а теперь дошло)) и настраивать не долго и работать будет в любом браузере но ведь картинки будут грузиться долго в таком случае. по сколько одна картинка на фоне должна быть чуть больше области которой нужна такая обводка, а за счет этого вес картинки будет больше и грузиться она будет медленней |
|
|
yury_mw |
1.4.2012, 12:36;
Ответить: yury_mw
Сообщение
#4
|
|
но ведь картинки будут грузиться долго в таком случае. по сколько одна картинка на фоне должна быть чуть больше области которой нужна такая обводка, а за счет этого вес картинки будет больше и грузиться она будет медленней Kolovrat, вы в курсе, что фоновое изображение по-умолчанию повторяется по вертикали и горизонтали (или как укажете в стиле)? Т.е. очень маленьким изображением можно заполнить сколь угодно большую область, в том числе и сколь угодно большую рамочку. |
|
|
Kolovrat_hb
|
Сообщение
#5
|
|
это я знаю. но предположим я хочу сделать чтобы это было как пергамент. тоесть концы должны быть как будто оборваны. и как же мне одной картинкой заполнить так чтобы они нормально соединились. предположим 1 квадратик и он со всех сторон имеет нужную мне форму. только вот он начинает заполнять по горизонтали и получается что идет эта оборванная полоска вдруг обрывается начинает идти такая же по горизонтали потом еще одна такая же по горизонтали и дальше опять продолжается вертикальная. короче видно везде будет что это маленький квадратик повторяется
|
|
|
yury_mw |
1.4.2012, 13:25;
Ответить: yury_mw
Сообщение
#6
|
|
Многое зависит от фоновой картинки и от размера блока.
Чтобы не бросалось в глаза, что "это маленький квадратик повторяется" дизайнеру и верстальщику важно уметь выделить повторяющийся фрагмент фонового изображения для тайлинга (если он есть, а если нет, то придется ограничиться действительно одним большим изображением). См пример картинки из соседней темы: Поэтому возможны варианты. Например * если у фоновой картинки каждый из четырех краев особенный, то фоновых картинок (и соответственно блоков-оберток) будет 4 * так же придется позаботиться, чтобы стороны вашего пергамента гладко сшивались в углах и возможно потребуются еще 4 блока для изображений углов Короче, дизайн и верстка всяких красивостей вроде рваных листков пергамента — это отдельная задачка, хоть и шаблонная. |
|
|
Positive_Fun |
2.4.2012, 9:39;
Ответить: Positive_Fun
Сообщение
#7
|
|
|
простым языком тебе надо картинку подогнать и размер блока =)) а лучше переходить на ccs3 и html5 так как прогрес не стоит на месте)))))
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Картинка долго грузится на слайдере | 0 | belissimo_world | 6195 | 7.12.2015, 10:32 автор: -belissimo_world- |
|
Ищу Копипастера 3р файл картинка+текст+кач файла и закач ко мне на хостинг | 0 | dimka1109 | 3187 | 21.1.2015, 20:13 автор: dimka1109 |
|
300 символов описание. Картинка и файл. | 21 | Seo-optimist | 7472 | 28.10.2014, 17:59 автор: Seo-optimist |
|
Помогите сделать одинаковые отступы и убрать border у плеера YouTube в IE | 0 | INVADER | 6166 | 8.9.2013, 12:26 автор: -INVADER- |
|
Нужна ваша помощ! При нажатии кнопки должна менятся картинка | 1 | Aljona | 6314 | 31.7.2013, 14:37 автор: -Aljona- |
Текстовая версия | Сейчас: 29.3.2024, 4:04 |