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;
}

例えば：

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 で使用する必要がありますか?

4

7 に答える 7

1

CSS3を使用すると、要素に複数の背景を適用できます。これらは、最初に提供した背景を上に、最後の背景を後ろにリストして、互いに重ね合わせます。最後の背景のみに背景色を含めることができます。

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

于 2012-11-24T18:08:21.403 に答える
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

はい、SPAN を追加して画像を与えることができます。注: 背景としてヘッダーに画像を与えると、SEO には役に立ちません。SEO の助けを得るために、同じ画像を 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>
于 2012-11-24T17:15:08.013 に答える
0

css プロパティ calles z-index があります。

値が高いほど、最も「前面」になります。低いほど、より多くの Back t になります

負の値は問題ありません。

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

注: different-browser の動作は異なるようです。

あなたの質問に答えるには、ヘッダーに低い z-index を与え、より高い z-index を持つ要素 (スパンが良いでしょう) を追加します

于 2012-11-24T17:19:33.187 に答える
0

CSS3 で複数の背景を使用します。

padding-top を下の.page-header位置に追加page-header.pngし、2 番目の背景を上に配置します。

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

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

于 2012-11-24T17:20:52.960 に答える