3

一些页面包含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;
}

例如：

索引.html

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

about.html

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

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

4

7 回答 7

1

使用 CSS3，您可以将多个背景应用于元素。它们相互叠加，您提供的第一个背景在顶部，最后一个背景在后面列出。只有最后一个背景可以包含背景颜色。

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

于 2012-11-24T18:08:21.403 回答
0

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

前任：

.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>
于 2012-11-24T17:15:08.013 回答
0

如果您正在寻找要覆盖在前一个背景图像上的辅助背景图像。然后试试这个。我自己没有尝试过，但它可能是答案。

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

您可能需要将 :after 定位到页面上您想要它的位置，但如果您希望图像位于元素内的某个位置，则可能更容易坚持使用 Sameera 建议的简单图像标记。

position:fixed;
left:0;
top:30%;
width:200px;
height:auto
于 2012-11-24T17:19:14.090 回答
0 
<div class="page-header">
   <h1>Homepage</h1>
   <img src="path/to/image.jpg" alt="" style="position:absolute; left:50px; top: 50px;" />       
</div>
于 2012-11-24T17:19:31.523 回答
0

有一个名为 z-index 的 CSS 属性。

值越高，它就越“前”。Back t 越低

负值是可以的。

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

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

要回答您的问题，请为您的标题提供较低的 z-index 并添加一个具有较高 z-index 的元素（跨度会很好）

于 2012-11-24T17:19:33.187 回答
0

通过 CSS3 使用多个背景。

将 padding-top 添加到底部.page-header位置，并将第二个背景放在顶部。page-header.png

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

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

于 2012-11-24T17:20:52.960 回答
0

CSS 允许我们通过在它们之间添加一个逗号 (,) 来添加多个背景图像。HTML

<div class="bg-image">

CSS

.bg-image{
      outline: 2px solid black;
      padding:20em;
      background-image: 
          url(https://images.unsplash.com/photo-1634148739677-a5bb54df2611?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80),

          url(add another ".svg img" or any type of image);
      background-repeat: no-repeat, repeat;
      background-position:right 20% center 0px, top left;
      background-size:auto, 10px;}
于 2021-10-15T13:44:17.813 回答