我對我的網站上的一些CSS工作有個簡單的問題。我需要幫助將一些文字放在圖像滑塊(www.ininkk.com)的頂部,就像它在頁面橫幅上的顯示方式:http://www.instacool.com.au/white-ink-printing/(它表示「白色墨水打印」)。任何幫助將不勝感激。謝謝!將文字置於圖像滑塊上?
0
A
回答
0
OK,你必須把文本的位置是絕對的,是這樣的:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
0
這裏有一個快速codepen,需要一些造型,但應該讓你開始:
http://codepen.io/nilestanner/pen/LkoEZz
<div class="img-bg">
<h2>some text</h2>
</div>
h2{
padding:100px;
}
.img-bg{
background:url('http://nilestanner.com/codepen/expanding-hover-tabs/vista-1.jpg');
height:500px;
}
相關問題
- 1. 將文字置於圖像上方?
- 2. 如何在滑塊上設置圖像?
- 3. 設置滑塊圖像
- 4. HTML有文字是正確的圖像與圖像滑塊
- 5. webgl圖像滑塊
- 6. Jumbotron圖像滑塊
- 7. Android圖像滑塊
- 8. 全圖像滑塊
- 9. jQuery圖像滑塊?
- 10. 用於ASP.net的jQuery圖像滑塊
- 11. 如何將文字置於Sitecore中的圖像上?
- 12. 如何將文字居中置於圖像上?
- 13. 將文字置於Android中的捕獲圖像上?
- 14. 在圖像滑塊上使用divs
- 15. 將+/-圖像綁定到滑塊?
- 16. 圖像滑塊w /獨特的URL基於Wordpress圖像ID
- 17. 圖像滑塊:背部圖像
- 18. CSS:方塊+文字在圖像上
- 19. 根據位置顯示或隱藏圖像(圖像滑塊)
- 20. 使用Flash Builder創建像Nivo滑塊的圖像滑塊
- 21. jquery單圖像滑塊
- 22. Chrome圖像滑塊問題
- 23. jQuery圖像(產品)滑塊
- 24. Javascript圖像滑塊setInterval()
- 25. 圖像滑塊不穩定
- 26. 暫停javascript圖像滑塊
- 27. 圖像滑塊標題
- 28. CIFilter inputIntensity滑塊大圖像
- 29. 如何 - 圖像滑塊
- 30. 圖像與nivo滑塊jquery