Question

当我在这个小提琴中点击'Blue'时，我试图显示一个图像和一些css： http://jsfiddle.net/adrianjsfiddlenetuser/C6Ssa/25/

但图像没有显示且css没有被应用？

Answer 1

width课程中的height和myImage属性太小，无法显示图片。

我试过这个并且有效：

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

请在此处查看：http://jsfiddle.net/S6Ntn/

Answer 2

您尝试显示的图像为256x256像素，但您使用的div为6x7像素，因此只显示其微小（透明）区域。如果您希望显示整个X，那么您需要将图片大小调整为正确的尺寸，使用img标记或使用background-size: 100%（CSS3以便浏览器支持受限）

Answer 3

更新

Updated 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;
}

原始

您将其设置为具有固定宽度和高度的背景。背景图像缩放不受广泛支持，因此可以更容易地将图像添加到具有指定高度和宽度的div。您需要使用img jQuery方法将其显式添加为append标记。

您的图片已设置好，但由于图片太大而无法显示，因为#myImage div的宽度和高度都增加了updated your jsFiddle。

Answer 4

如果仔细查看，则会显示图像并且还会应用css。每当你点击时，最右边都有一个灰色的小盒子（你可能需要滚动）。这是图像加载的地方。并且，您输入错误。您使用addClass('myImage')代替removeClass('myImage')。除此之外，你没有利用链接的强大功能。查看更新代码。它更好，而且有效。

单击按钮时使用css显示图像

4 个答案:

更新

原始