0

このフィドルで「青」をクリックすると、CSSとともに画像を表示しようとしています: http://jsfiddle.net/adrianjsfiddlenetuser/C6Ssa/25/

しかし、画像が表示されず、CSSが適用されていませんか?

4

4 に答える 4

3

クラスのwidthおよびheightプロパティmyImageが小さすぎて画像を表示できませんでした。

私はこれを試してみましたが、うまくいきました：

.myImage{
    ...
    width:60px;
    height:70px;
    ...
}​

ここでチェックしてください：http://jsfiddle.net/S6Ntn/

于 2012-05-29T15:27:56.830 に答える
0

表示しようとしている画像は 256x256pxdivですが、使用している画像は 6x7px であるため、小さな (透明な) 領域のみが表示されています。X 全体を表示したい場合は、画像のサイズを正しいサイズに変更するか、imgタグを使用するか、またはbackground-size: 100%(CSS3 のためブラウザーのサポートが制限されています)を使用する必要があります。

于 2012-05-29T15:28:21.530 に答える
0

アップデート

更新された jsFiddle これは、背景の代わりにタグ
を使用する実際のサンプルです。img幅と高さはまだ CSS で設定されていますが、src現在は JavaScript 内で設定されています。

JavaScript

$("#red").click(red);
$("#blue").click(blue);

function red()
{
    $("#myDiv").removeClass('blue')
        .addClass('red')
        .text('test')
        .remove('img');
}

function blue()
{
      $("#myDiv").removeClass('red')
          .addClass('blue')
          .text('test')
          .append('<img src="http://oneseasonnation.com/www/wp-content/uploads/2008/11/2009/01/ip_icon_02_cancel.png" />');
}

CSS

.red
{
    background-color : red   
}
.blue
{
    background-color : blue   
}
.blue img
{
    width:25px;
    height:25px;
}

</p>

オリジナル

幅と高さが固定された背景として設定しています。背景画像のスケーリングは広くサポートされていないため、div高さと幅を指定して画像を に追加する方が簡単な場合があります。jQuery メソッドimgを使用して、タグとして明示的に追加する必要があります。append

画像が設定されていますが、大きすぎるため表示されません。これを示すために、 divの幅と高さを増やして jsFiddle を更新しました。#myImage

于 2012-05-29T15:28:33.377 に答える
0

よく見ると画像が表示されており、cssも適用されています。クリックするたびに、右端に小さな灰色がかったボックスがあります (おそらくスクロールする必要があります)。そこに画像が読み込まれます。そして、入力ミスがありました。addClass('myImage')あなたの代わりにremoveClass('myImage'). それに加えて、チェーンの強力な機能を利用していませんでした。更新コードを確認してください。それはより良く、機能します。

于 2012-05-29T15:32:53.333 に答える