Was ist eine bessere Möglichkeit, um kreisförmige Schaltflächen zu erstellen: <img>, oder Hintergrundbild?

Question

Ich habe zwei Möglichkeiten zur Schaffung von Kreis Tasten: http://codepen.io/anon/pen/GiHyJ Sie beide gleich scheinen, aber ich bin nicht sicher, welche Art und Weise stabiler, Cross-Plattform, verwendbar, usw. ist nur ich ein Android-Handy auf testen, und beide gut aussehen . Sollte ich eine Methode gegenüber der anderen anwenden, und warum?

Methode eins: innerhalb einer <div>, ermöglicht Benutzer, ein Kontextmenü auf dem IMG zu erhalten.

<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); 
} 

Methode zwei: background: url auf der <div>. Weniger Markup

<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); 
} 

Answer 1

verwenden, um Bilder für Inhalt und background-image für Design-Elemente. In Ihrem Fall sind Tasten ein Teil Ihres Designs und sollten verwendet werden background-image.