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>

about.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

Answer 2

是的，您可以添加SPAN并提供图像，注意：如果您将任何图像作为背景提供给标题，它对搜索引擎优化没有用，我建议将相同的图像保存在IMG标签中，并在屏幕外获得一些搜索引擎优化的帮助。

例如：

.page-header {
    background: url(/public/images/page-header.png) no-repeat;
    width: 1000px;
    height: 190px;
    color: white;
    font-size: 17px;
    margin: 0;
    position:relative;
}
.out-of-screen {
    position:absolute;
    top:-2000em;
}
<div class="page-header">
   <h1>Homepage</h1>
   <img src="/public/images/page-header.png" alt="alt text" class="out-of-screen">
</div>

Answer 3

如果您要查找的是辅助背景图像，请将其覆盖在之前的背景图像上。然后尝试这个。我自己没试过，但可能就是答案。

.page-header:after{
    background-image:url('/public/images/page-header2.png' no repeat;
}

您可能需要将：之后定位到页面上您想要的位置，但如果您希望图像位于元素内的某个位置，则可能更容易使用Sameera建议的简单图像标记。 / p>

position:fixed;
left:0;
top:30%;
width:200px;
height:auto

Answer 4

<div class="page-header">
   <h1>Homepage</h1>
   <img src="path/to/image.jpg" alt="" style="position:absolute; left:50px; top: 50px;" />       
</div>

Answer 5

有一个css属性calles z-index。

价值越高，它的前线越多。 Back t越多

越低

Négative值没问题。

.front{
    z-index: 999;
}
.back{
    z-index: 0;
}

注意：不同的浏览器似乎有不同的行为。

要回答您的问题，请在标题下方添加一个z-index，然后使用更高的z-index添加elemt（跨度会很好）

Answer 6

在CSS3中使用多个背景。

将填充顶部添加到.page-header位置page-header.png到底部和将第二个背景置于顶部。

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

http://www.css3.info/preview/multiple-backgrounds/

如何在背景图像上应用图像？

6 个答案: