使用CSS將文本添加到背景圖像

我在部分在視圖中時覆蓋整個屏幕的部分上使用了背景圖像。然後當頁面滾動時，後面的部分會覆蓋它。使用CSS將文本添加到背景圖像

#section1{ 
background: URL(../SiteData/Images/SectionBackground.jpg) no-repeat center top fixed #f1ece2; 

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

min-height:800px; 
}

我想在此圖像的一半左右添加文字。我可以這樣做，但我希望它保持原位，就好像它實際上是圖像的一部分。所以當屏幕向上滾動時，文本會被隱藏，而不是滾動到頂部 - 所以它保持在圖像上的位置。

我該怎麼做？

感謝

來源

2016-09-22 pbs

預計你至少嘗試爲自己的代碼這一點。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，做出嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您嘗試過的以及爲什麼它不起作用。 –

進一步解釋「所以當屏幕向上滾動時，文本會被隱藏起來而不是滾動到頂部 - 所以它保持在圖像上的位置。」您想要在用戶滾動某個距離時隱藏文本的效果，或者文本在顯示時應該被頁面中的其他元素隱藏嗎？ – EddNewGate

這裏是讓他們兩個圖片和文字響應Live On FIDDLE演示答案。試試這個，但不只是複製粘貼。嘗試瞭解css如何在圖像上顯示這些文字。如果您有任何問題，請發表評論。祝你好運。

.img-reponsive { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 

 
.textoverimage { 
 
    position: relative; 
 
} 
 

 
p.title { 
 
    position: absolute; 
 
    top: 75px; 
 
    left: 0; 
 
    text-align: center; 
 
    font-size: 38px; 
 
    width: 100%; 
 
    color: #fff 
 
} 
 

 
@media only screen and (max-width: 767px) { 
 
    p.title { 
 
    font-size: 1.5em; 
 
    line-height: 1.5em; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 479px) { 
 
    p.title { 
 
    font-size: 1.1em; 
 
    line-height: 1.1em; 
 
    } 
 
}

<div class="textoverimage"> 
 
    <img class="img-reponsive" src="http://cdn.shopify.com/s/files/1/0258/1101/t/2/assets/slideshow_3.jpg?5808719635421587686" alt="demo_img"> 
 
    <p class="title"> TEXT </p> 
 
</div>

來源

2016-09-22 17:56:18

使用CSS將文本添加到背景圖像

回答

相關問題