在數字前面放置文字

-1

我剛剛開始在codecademy學習代碼，並完成了一個練習，但我想要進行實驗以便完全理解代碼及其工作原理。在數字前面放置文字

Screenshot

右側的網頁有一個section class="jumbotron「與作爲背景的圖片設置爲覆蓋大小。我發現，便於放置在它前面的文字，因爲它是一個背景。

下面的是，有4張圖片和文字裏面figure class="col-sm-6"與款爲（每格列2）第1項和圖爲方形的圖像，我想放置文本項目1， item 2內部的圖像和中心內部。

它是如何工作的？

來源

2016-02-21 Victor Anjos

看看這個答案：http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css。它會幫助你。 –

您可以將每張照片製作爲div的背景，並在div中包含文本，或者如果要將照片保存爲標記，則可以查看@IffatFatima的建議，這將對每張照片要求以下結構： '.item> img + span'其中跨度將包含文本並獲得絕對定位以成爲絕對位置或顯示位置： – Aziz

位置：flex應該起作用。 –

div { 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/0/0e/Tree_example_VIS.jpg"); 
 
    background-size: cover; 
 
    position: relative; 
 
    height: 450px; 
 
    width: 600px; 
 
} 
 
span { 
 
    background-color: rgba(255, 255, 255, 0.5); 
 
    bottom: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100%; 
 
}

<div> 
 
    <span>Example</span> 
 
</div>

position: absolute上span使得它相對定位到最近的定位的祖先。

bottom: 0將我們的文本置於底部，text-align: center居中。

來源

2016-02-21 11:54:36 Przemek

在數字前面放置文字

回答

相關問題