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

您尝试显示的图像是 256x256 像素，但div您使用的是 6x7 像素，因此只显示了一小部分（透明）区域。如果您希望显示整个 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

您的图像已设置好，但由于它太大而不可见，为了证明这一点，我已经更新了您的 jsFiddle，增加了#myImagediv 的宽度和高度。

于 2012-05-29T15:28:33.377 回答
0

如果你仔细看，图像正在显示，并且 css 也在被应用。每当您单击时，最右侧都会出现一个灰色的小框（您可能需要滚动）。那就是加载图像的地方。而且，你有一个打字错误。而不是addClass('myImage')你使用removeClass('myImage'). 除此之外，您没有利用链接的强大功能。查看更新代码。它更好并且有效。

于 2012-05-29T15:32:53.333 回答