Ответ 1
Используйте изображения для контента и background-image для элементов дизайна. В вашем случае кнопки являются частью вашего дизайна и должны использоваться background-image.
Какой способ создать круговые кнопки: <img> или background-image?
У меня есть два способа создания круговых кнопок: http://codepen.io/anon/pen/GiHyJ Они оба кажутся равными, но я не уверен, какой путь более стабилен, кросс-платформенный, годный к употреблению и т.д. У меня есть только Android-телефон для тестирования, и оба выглядят хорошо. Должен ли я использовать один метод над другим и почему?
Метод один: <img> внутри a <div>, позволяет пользователю получить контекстное меню на img.
<div class="method1">
<img src="http://i.imgur.com/TLFDrvp.jpg" />
</div>
.method1 {
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}
Метод второй: background: url на <div>. Меньше разметки.
<div class="method2"></div>
.method2 {
background: url(http://i.imgur.com/TLFDrvp.jpg);
width: 100px;
height: 100px;
overflow: hidden;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .9);
}