Подгонка изображения в качестве границы для div любого размера

0

Я видел несколько сайтов, построенных с помощью Wix, которые используют границы, которые являются изображениями. Изображения сами по себе массивные, и я пробовал несколько методов, но я не могу понять, насколько они управляют мной. Это одно из изображений: http://bit.ly/1lZfHRn

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

При просмотре на сайте Wix граница буквально идеально подходит, при изменении размера изображения, конечно, сохраняется его соотношение сторон и количество прозрачности. Тем не менее, Wix удалось вывести границу больше и снизить прозрачность. Я действительно не понимаю, как им это удалось, особенно на изображении около 192 х 192, используя то же самое изображение, которое я связал.

Может ли кто-нибудь пролить свет на это для меня? Я был бы очень рад узнать, как работает такая работа!

  • 0
    Не могли бы вы опубликовать ссылку на один из этих сайтов Wix?
  • 0
    bit.ly/1fIEtS6 - есть ссылка на один из сайтов wix. Я использовал FireBug, чтобы удалить изображение, а затем щелкните правой кнопкой мыши> просмотреть фоновое изображение. Показывает фактический размер.
Теги:
image
border

1 ответ

0

Вы имеете в виду что-то вроде этого - FIDDLE?

Выберите фон, наложите изображение и измените изображение и фон, чтобы они соответствовали вашим требованиям.

CSS

.testme {
    width: 550px;
    height: 400px;
    background: url('http://i.imgur.com/YTPgXWG.jpg') no-repeat;
    background-size: 550px 320px;
    padding: 20px;
}
img {
    display: block;
    width: 450px;
    height: 250px;
    margin-left: 30px;
    margin-top: 10px;
}
  • 0
    По сути, да, за исключением того, что размер исходного изображения составляет почти 2000px кв. И все же они поднимают границу этого, как если бы это было уже 196px кв., В значительной степени устраняя большую часть прозрачности центра.
  • 0
    Вы можете изменить размер изображения на что угодно. Вы также можете захватить это изображение, сделать весь центр черным и сохранить его в формате jpg или png, что даст вам большую гибкость.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню