Сегодня мы научимся, как с помощью CSS3 и jQuery можно сделать округленную стилизацию для картинок. Проблема состоит в том, что не все браузеры нормально отображают CSS3 border-radius и box-shadow. Но эта проблема вполне исправима, если использовать span.
Цель
Наша цель использовать CSS3 box-shadow и border-radius. Данные функции позволяют сделать такое изображение:
Проблема
Проблема состоит в том, что не все браузера корректно делают изображения, используя CSS3:
Трюк CSS
Лучше указать оригинальное изображение в качестве фонового тега. Чтобы скрыть исходное изображение, нужно указать opacity:0 или display:none. Использование прозрачности является более эффективным методом, потому что рисунок будет оставаться доступными для копирования или загрузки.
Завершене
Чтобы облегчить, можно использовать JQuery для автоматического переноса диапазона тегов span вокруг изображения.
JQuery код ищет элементы этого класса ».rounded-img» или «rounded-img2″ (в моем случае, это элемент изображения) и оборачивает эго с тег span. Обнаружив скрипты src, width, height и CSS атрибут класса исходного изображения и он применяет их в виде встроенного стиля в пролете тега. Затем он задает прозрачность изображения 0, чтобы скрыть это.
JQuery работает с любым изображением размерности (с шириной, высотой атрибута или без них). Она также может быть объединена с другими классами CSS.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
Пример использования
Вы можете использовать его для аватара вашего блога или фотографии в профиль:
