0

同じアイコンを何度も使用している html ページがあるため、そのアイコンを背景画像として css に埋め込みました。

CSS では、アイコンのクラスは次のようになります。

.user {
background-image: url(data:image/png;base64,...encoded png file...);
background-position: 0 0;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}

<span class='user'></span>タグを使ってアイコンを表示してみましたが、まあまあです。

アイコンを別のページへのリンクにしたいのですが、これを行うとアイコンが正しく表示されません。

私が試してみました：

<a href="www.google.com"><img class="user" src=""></img></a>

しかし、これはエクスプローラーでその上に壊れたリンクアイコンを描画します。問題ないように見えますが、Chrome では境界線があります。それは明らかに間違っています。

私も試しました：

<a href="www.google.com"><span class="user"></span></a>

これは機能しますが、マウスカーソルがアイコンの上にあるときにポインターに変わりません。

私は何をすべきですか？

4

4 に答える 4

4

幅/高さinline-blockを設定し、明示的にcursor. これら 2 つのことが重要なコンポーネントです。

.user {
    background-image: url(data:image/png;base64,...encoded png file...);
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block; /* set display so you can set width/height */
    cursor: pointer; /* ensure it shows the link cursor */
    width: 16px;
    height: 16px;
}

そしてHTML：

<a href="#urlhere"><span class="user"></span></a>

したがって、inline-block画像を表示する要素になり、それをアンカーでラップします。これは基本的に、アンカーを に巻き付けるのと同じ<img />です。

または、 だけでこれを行うこともできます<a>。次の HTML で、まったく同じ CSS を使用します。

<a href="#urlhere" class="user"></a>

どちらもあなたが求めているものを達成するはずです。これら 2 つの選択肢の違いは、主にセマンティクスです。

于 2013-06-20T05:45:09.097 に答える
0

classアンカータグに属性を設定できます。

<a href="#" class="user"></a>
于 2013-06-20T05:47:18.010 に答える
0

これをcssに追加してみてください

  cursor:pointer;/*Link with poniter*/

<a href="www.google.com"><span class="user" /></span></a>
于 2013-06-20T05:47:25.150 に答える
0

このようなものを探していますか

HTML:

<a href="http://www.google.com" class="user"></a>

CSS:

.user {  
    text-indent: -99999px;
    background: url("http://www.google.co.in/images/srpr/logo4w.png") no-repeat top left;
    float: left;   
    overflow: hidden;
    width: 600px;
    height: 200px;
    margin: 10px;
}

これがあなたが必要とするものであることを願っています。

于 2013-06-20T05:48:42.243 に答える