11
Mam dwa sposoby tworzenia okrągłych przycisków: http://codepen.io/anon/pen/GiHyJ Oba wydają się być jednakowe, ale nie jestem pewien, która droga jest bardziej stabilna, na różnych platformach, użytecznych itp. Mam tylko telefon z Androidem do przetestowania i oba wyglądają dobrze . Czy powinienem stosować jedną metodę nad drugą i dlaczego?Który jest lepszy sposób tworzenia okrągłych przycisków: <img> lub obrazu tła?
Metoda pierwsza: <img> wewnątrz <div>, pozwala użytkownikowi uzyskać menu kontekstowe na obrazie.
<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);
}
Sposób drugi: background: url na <div>. Mniej znaczników.
<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);
}
Wolałbym wersję w tle. Moim zdaniem obrazy powinny być używane tylko do pokazania, no dobrze, obrazu. Nie używaj obrazów, jeśli potrzebujesz go tylko do układu/projektu. Jak już powiedziałem: brak prawdziwych faktów tutaj, tylko moja opinia. –
@LinusCaldwell: Odwrotnie, można argumentować, że 'background-image' powinien być używany tylko dla, dobrze, tła. Nie używaj tła do dostarczania nowej wiedzy. – ruakh
Jeśli używasz obrazu tła dla przycisku i zwykłego tekstu dla linku, wynikowa strona jest łatwiejsza do odczytania dzięki przeglądaniu wspomaganemu technologią, na przykład dla niewidomych. Ponadto, stylizując go za pomocą CSS, utrzymując przycisk i tekst na przycisku osobno, ułatwisz przyszłe aktualizacje wyglądu i działania. –