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 - 使文本留在响应图像上的相同位置

回答

相关问题