CSS - 使文本留在響應圖像上的相同位置

我正在嘗試使文本留在響應圖像上的相同位置。CSS - 使文本留在響應圖像上的相同位置

的HTML我有是：

<div class="container"> 
    <img src="http://i.imgur.com/K6XP6tp.png" alt=""> 
    <div class="counter"> 
     <span class="days">1</span> 
     <span>2</span> 
     <span>3</span> 
    </div> 
    <div class="counter2"> 
     <span>1</span> 
     <span>2</span> 
     <span>3</span> 
    </div> 

</div>

的CSS：

.container { 
    position: relative; 
} 

.container img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto; 
} 

.days { 
    position: absolute; 
    top: 30%; 
    left: 50%; 
} 

.counter span { 
    font-size: 25px; 

}

不能使這項工作。我創建了一個jsfiddle。任何想法如何使這項工作？

來源

2015-08-24 user1049961

你的意思是你想要的文字縮小爲圖像縮小，又名保持相對大小的圖像相同的比例是多少？ –

我需要文字留在圈子裏......我可以在媒體查詢中處理字體大小，所以這更多的是關於處理位置...... – user1049961

我建議裁剪你用於圓形的圖像並創建'divs '你可以在其中放置你的號碼（背景是圈子的背景）。這樣數字將始終在'div'/circle內。 –

你應該從流動中的圖像做到這一點，所以它允許它的容器（這裏是身體）增長。

然後你的30％來得有效率（25％用於下面的片段）。 :)：

.container { 
 
    position: relative; 
 
} 
 
.container img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.days {/* other spans to position through coordonates as well */ 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 50%; 
 
} 
 
[class*="counter"] span { 
 
    font-size: 25px; 
 
    position: absolute; 
 
}

<div class="container"> 
 
    <img src="http://i.imgur.com/K6XP6tp.png" alt=""> 
 
    <div class="counter"> 
 
    <span class="days">1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    </div> 
 
    <div class="counter2"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    </div>

來源

2015-08-24 21:50:48

謝謝，這個工程很好。 – user1049961

CSS - 使文本留在響應圖像上的相同位置

回答

相關問題