如何在顶部框架上添加一个小图像和一个图像容器，同时控制容器的背景颜色

Question

我有一个 html 页面，它通过 css 而非 html 框架集标记由顶部、左侧和右侧框架分隔。我想将一个小图像添加到顶部框架，但能够控制顶部框架的背景颜色。我运行遇到的问题是我看到添加了图像，但没有指定背景颜色。

css 文件

#foo {
    background-color : blue;
    background-image : url("foo.png");
    width : 100px;
    height : 50px;
}

html 文件

<html>
    ...<body>
         <div id="foo"></div>
    ...</body></html>

[更新答案]

阅读 Marcelo 和 Paulie_D 对这个问题的回复后，我意识到我必须做的事情（首先更正我的问题并在此处添加答案）。

<html>
    ...<body>
        <div id="container">
            <div id="foo"></div>
        </div>


#container {
    background-color : blue;
}

#foo {
    background-image : url('foo.png');
    width : 100px;
    height : 50px;
}

Answer 1

当然前提是图片有透明度..

div {
  width: 200px;
  height: 200px;
  background-image: url(http://www.clker.com/cliparts/1/c/c/f/13902170611226395134cat_png_by_dbszabo1-d3dn2c8.png);
  background-size: cover;
  background-color: lightblue;
}

<div>
  <h1>My Cat</h1>
</div>

如何在顶部框架上添加一个小图像和一个图像容器，同时控制容器的背景颜色

how to add a small image and a container of the image on top frame yet control background color of the container

css

background-image

background-color