私は、画像がCSSで追加されたところで「素敵なボタン」をする方法を学びたいと思います。たとえば、私は、次の画像ボタンwith css
ような何かをしたいと仮定（つまり、画像とテキストが一緒にいると、全体像がリンクされている。あなたは、同じ精神で何かをhttp://www.geogebra.org/teamを参照のこと）。
HTML
CSS
今では、私が行っている最高の画像を配置することです.modern_art{
background-image: url(/pictures/modern_art.jpg)
/* or something similar */
/* more instructions */
}
、その後名前を持つが、次のように質問がそうすることです::beforeしかし、これはいいボタンを得るには不十分です。あなたは私に何をお勧めしますか？
これが見つかった場合、あなたを助けてくれるかもしれません。
あなたのコードではない場合は、あなたがそれを見つけた場所にリンクを置くべきだと思います。多分これを達成する方法のOPのためのより良い説明になるでしょう。 –
うん、ちょうどそれをやった。 – Felix
@Felixはい、まさに私が欲しいものです...しかし、このコードはどのようにして全体像を得ていますか？私はそれを試してみると、私の画像はカットされ...私は何かが間違っている必要があります –
さて、あなたはあなたのCSSと非常に近いです。明示的な幅と高さ、およびいくつかのパディングが必要です。
.modern_art{
display:inline-block;
width: 252px; height:20px;
background: #a9a9a9 url(http://i.stack.imgur.com/s2ZG0.png) no-repeat center 40px;
padding: 318px 60px 30px;
text-align:center; /* oh well, and some styling to make the text look similar to the example */
color:black;
text-decoration:none;
font-size:20px;
letter-spacing:.1em;
}<a class="modern_art" href="...">Modern Art</a>
':: before'はなぜですか？テキストは ''タグの内側にあるので、画像の下または横に配置するだけで構いません。 'padding'を使って背景画像のためのスペースを確保してください。あなたの質問は何ですか？ – C14L
なぜ 'css'で追加する必要がありますか？なぜ、テキストと画像を 'a'タグに入れてみませんか？ –
@Malikアクセシビリティ理由のため –