11
私は円形のボタンを作成する2つの方法があります：http://codepen.io/anon/pen/GiHyJ どちらも同じように見えますが、どの方法がより安定しているか、クロスプラットフォームか、使用可能かなどはわかりません。 。他の方法よりも1つの方法を使用する必要があります。なぜですか？円形ボタンを作成するより良い方法は、<img>、または背景画像ですか？
方法1：<div>の中の<img>は、ユーザーが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);
}
方法2：<div>にbackground: url。少ないマークアップ。
<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);
}
バックグラウンドバージョンが好きです。私の意見では、画像は、画像を表示するために使用する必要があります。レイアウトやデザインに必要なだけの画像は使用しないでください。私が言ったように、ここには真実はありません。私の意見です。 –
@LinusCaldwell：逆に、「背景画像」は背景だけに使うべきだと主張することができます。フォアグラウンドコンテンツを提供する背景を使用しないでください。 – ruakh
ボタンの背景画像とリンクの通常のテキストを使用すると、結果のページは、盲人などの技術支援ブラウジングによって読みやすくなります。また、CSSでスタイリングすることで、ボタンとボタンのテキストを別々に保つことで、将来のルック・アンド・フィールの更新を簡単に行うことができます。 –