css - 如何在 CSS 中叠加图像

Question

我需要弄清楚如何将我的徽标图像覆盖在另一个重复图像之上，该图像被用作我网站顶部导航栏的背景。

nag bar 图像的 CSS 如下所示：

.header {
background:url(../images/bg-header.jpg) repeat-x;
height:125px;

有没有办法在此之上添加另一个图像并将其与底层图像的左侧对齐？

Answer 1

像这样的东西？

http://jsfiddle.net/aJEwZ/

<style>
.nav {
    background: url(http://www.psdgraphics.com/file/light-wooden-background.jpg) repeat-x;
    height: 250px;
    width: 500px;
    border:1px solid black;
}

img {
    padding:20px;
}
</style>

<div class='nav'>
    <img src="http://a.deviantart.net/avatars/h/a/haz-elf.jpg?1" />
    hello</div>

Answer 2

干得好。

这是一个演示

这是代码

这是CSS

.header {
    background:  url("http://fc04.deviantart.net/fs70/i/2013/266/7/3/sydneigh_logo_by_robberbutton-d6nmaox.png") top left no-repeat ,url("http://subtlepatterns.com/patterns/sandpaper.png") repeat-x;
    background-size: 571px 125px, auto;
    height:125px;
    width: 100%;
}

请注意 background 属性如何具有两个速记背景，其中的图像用逗号分隔。第一个图像位于第二个图像的顶部，依此类推。

属性 background-size 的第一个属性只适用于背景属性中的第一个属性（声明的背景属性中的第一张图片）。第二个适用于背景属性中的第二张图片。

这与其他背景属性（例如背景重复和背景图像）的工作方式相同。

这是一篇关于拥有多个背景图片的文章：
http ://www.css3.info/preview/multiple-backgrounds/