html - 如何在背景图像之上应用图像？

Question

一些页面包含page-header 元素/类。

.page-header 类如下所示:

.page-header {
    background: url(/public/images/page-header.png) no-repeat;
    width: 1000px;
    height: 190px;
    color: white;
    font-size: 17px;
    margin: 0;
}

例如:

index.html

<div class="page-header">
   <h1>Homepage</h1>
</div>

关于.html

<div class="page-header">
    <h1>About</h1>
</div>

我想使用 css 在 page-header 顶部添加小图像，每个页面都有不同的图像。如何做到这一点，我应该将 span 与 css 一起使用吗？

Answer 1

使用 CSS3，您可以为元素应用多个背景。它们层叠在一起，您提供的第一个背景在上面，最后一个背景在后面列出。只有最后一个背景可以包含背景颜色。

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds