html - 背景图片用简单的 css 让我失望

标签 html css

对于为什么这个简单的例子没有显示我的背景图像但我就是看不到它,我敢肯定有一个简单得可笑的答案。我希望看到图像两次,一次是图像使用类,一次是直接引用图像。

思想

    <!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>

最佳答案

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

这是固定的 fiddle

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

关于html - 背景图片用简单的 css 让我失望,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18578262/

相关文章:

html - 模糊图像的单面

javascript - jQuery DataTables 将 div 附加到特定位置

CSS flex 基础 : 0% has different behaviour to flex-basis: 0px

css - 如何在 Firefox 中跨域加载字体

javascript - 选择时更改字体大小

javascript - 通过鼠标单击获取图像映射的坐标

javascript - 停止在提交表单时添加 URL 参数

html - Bootstrap 3 : Text alignment in jumbotron

javascript - 附加到另一页上的表单?

html - 如何停止将文本阴影应用于文本装饰?