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

你走了。

这是一个DEMO

这是CODE

这是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-size的第一个属性仅适用于background属性中的第一个属性（声明的background属性中的第一个图像。）第二个属性适用于background属性中的第二个图像。

这与其他背景属性（如background-repeat和background-image）的工作方式相同。

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

如何在CSS中叠加图像

2 个答案: