图像上的精确文本叠加（和响应式）
[英]Precise text overlay on image (and responsive)
问题描述
I would like to put text on a specific spot on a picture.
我想将文字放在图片的特定位置。 This text must stay in the same place relative to the image.此文本必须相对于图像位于同一位置。 I made this simple example to illustrate the problem.我做了这个简单的例子来说明这个问题。 The '60kg' must stay next to the materials. “60kg”必须紧挨着材料。 If i resize the browser slightly the text moves and is not next to the materials anymore.如果我稍微调整浏览器的大小，文本会移动并且不再靠近材料。 This is how it is supposed to be (even when resizing): example这就是它应该的样子（即使在调整大小时）：示例
here is my code or check this jsfiddle https://jsfiddle.net/9qc8kps0/64/这是我的代码或检查这个jsfiddle https://jsfiddle.net/9qc8kps0/64/
HTML HTML
<div class="background">
<img class="crane" src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000"
class="img-responsive">
<div class="overlay">
60kg
</div>
CSS CSS
.background {
background-color: lightgrey;
position: relative;
}
.crane {
width: 30vw;
margin-left: 35vw;
position: absolute;
}
.overlay {
background-color: rgb(255, 0, 0, 0.5);
position: absolute;
margin-left: 43vw;
margin-top: 37vh;
width: auto;
font-size: 1em;
padding: 2px;
}
Let me know if I have to explain my problem more:)让我知道我是否需要更多地解释我的问题:)
2 个解决方案
解决方案1
1 已采纳 2022-09-03 11:10:30
Don't position the image, and use percentages to position the text rather than absolute values.不要 position 图像，并使用百分比来 position 文本而不是绝对值。
.background { background-color: lightgrey; position: relative; display: inline-block; height: 100vh; }.crane { max-width: 100%; height: 100%; }.overlay { background-color: rgb(255, 0, 0, 0.5); position: absolute; left: 30%; /* adjust as required */ top: 52%; /* adjust as required */ width: auto; font-size: 1em; padding: 2px; }
<body> <div class="background"> <img class="crane" src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" class="img-responsive"> <div class="overlay"> 60kg </div> </body>
解决方案2
0 2022-09-03 11:15:21
Because it's not possible to create a child element in an image, you need to align the images to a shared container.由于无法在图像中创建子元素，因此您需要将图像与共享容器对齐。 If we were talking about two divs, we could do something simple just as:如果我们谈论两个 div，我们可以做一些简单的事情，就像：
<div id="container">
<div id="child"></div>
</div>
#container {
position: relative;
border: 2px solid red;
width: 10rem;
height: 10rem;
}
#child {
position: absolute;
top: 20%;
left: 20%;
border: 2px solid blue;
width: 2.5rem;
height: 2.5rem;
}
Because one of our elements is an image, we need to take another approach.因为我们的元素之一是图像，所以我们需要采取另一种方法。 Our text and crane image should both have absolute positioning.我们的文字和起重机图像都应该有absolute定位。 The container needs to have a relative position.容器需要有一个relative的 position。 We need to create a shared container.我们需要创建一个共享容器。 Then, we can specify with absolute positioning (top, bottom, left, right) how we want the text to be relative to the image.然后，我们可以使用绝对定位（上、下、左、右）指定我们希望文本与图像的相对关系。 We should use percentages other than absolute values.我们应该使用绝对值以外的百分比。
It can be implemented this way:可以这样实现：
Please note that I created a responsive-friendly design using a flex-container.请注意，我使用弹性容器创建了一个响应友好的设计。
<body>
<div class="flex-container">
<div class="background">
<img class="crane" src="https://img.freepik.com/free-vector/isolated-tower-crane-cartoon-style_1308-104645.jpg?w=2000" class="img-responsive">
<div class="overlay">
60kg
</div>
</div>
</body>
.flex-container {
display: flex;
justify-content: center;
}
.background {
background-color: lightgrey;
position: relative;
}
.crane {
width: 30vw;
position: relative;
}
.overlay {
background-color: rgb(255, 0, 0, 0.5);
position: absolute;
font-size: 1em;
padding: 5px;
left: 30%;
top: 50%;
}
You might also want to add some media queries to make it more accurate:您可能还想添加一些媒体查询以使其更准确：
@media only screen and (min-width: 800px) {
.overlay {
top: 52%;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.