1. 首頁
  2. 問答
  3. 如何在背景圖像上應用圖像？

如何在背景圖像上應用圖像？

2012-11-24 28 views
1

某些頁面包含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？

來源

2012-11-24 I' ll-Be-Back

回答

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-24 17:15:08

+0

這與SEO有什麼關係？它不是標誌圖像。 –

+0

如果是橫幅圖像i ment。 –

0

如果您尋找一個輔助背景圖像前面的背景圖像上被覆蓋。然後試試這個。我沒有嘗試過，但它可能是答案。

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

您可能需要定位：到您想要的頁面上，但它也許更容易與簡單的圖像標籤，如果你想要的形象是在某個位置內堅持爲Sameera曾建議後元素。

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

來源

2012-11-24 17:19:14 sourRaspberri

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-24 17:19:31

0

有一個CSS屬性卡列斯z索引。

價值越高，「最前面」就越多。 越低越後面t將是

負值是好的。

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

注：不同的瀏覽器似乎有不同的行爲。

要回答你的問題，你給的z-index低到你的頭，並用CSS3添加elemt（跨度將是一件好事）有較高的z-index

來源

2012-11-24 17:19:33

相關問題

 相關問題