0

I'm sure there is a ridiculously simple answer for why this simple example is not showing my the background image but I just don't see it. I'm expecting to see the image twice, once when the image uses the class, and once when it references the image directly.

Thoughts

    <!DOCTYPE HTML>
    <html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style>
            .chkCombo {
                background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
            }
        </style>
    </head>
    <body>
         <div class="x">
           <img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="chkCombo">
        </div>
         <hr />
            <div class="x">
           <img  src="http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png" />
       </div>
    </body>
    </html>
4

2 回答 2

1

通过向图像添加高度和宽度并将其设置为display: block;图像将出现。

这是一个固定的小提琴

顺便说一句，我没有看到 base64 图像的效果，您使用它并在同一元素上使用带有背景图像的类。

于 2013-09-02T17:38:34.917 回答
0

尝试使用这种风格

.chkCombo {
    height: 56px;
    width: 350px;
    background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}

一个jsFiddle演示

PS：背景图像实际上是“背景”图像，因此如果元素没有尺寸（高度和宽度），则背景图像将没有尺寸。因此你需要给它一个高度和宽度

于 2013-09-02T17:44:10.800 回答