Html 在响应图像中显示文本并将边距保持为0_Html_Css

Html 在响应图像中显示文本并将边距保持为0
html css
Html 在响应图像中显示文本并将边距保持为0,html,css,Html,Css,我有一个图像，它的宽度是响应的，但高度是固定的在这个图像中，我想显示一个文本，它必须始终具有右边距：0相对于图像本身这就是我尝试过的。但是你可以看到，当你调整窗口大小时，我并没有得到我想要的 CSS: .wrapper { width: 100%; height: auto; background-color: red; text-align: center; position: relative; } .imgStyle { width: 50%; max-wi
我有一个图像，它的宽度是响应的，但高度是固定的
在这个图像中，我想显示一个文本，它必须始终具有
右边距：0相对于图像本身
这就是我尝试过的。但是你可以看到，当你调整窗口大小时，我并没有得到我想要的
CSS:
.wrapper {
  width: 100%;
  height: auto;
  background-color: red;
  text-align: center;
  position: relative;
}
.imgStyle {
  width: 50%;
  max-width: 200px; 
  height:120px;
}
.txt {
  z-index: 100;
  position: absolute;
  right:26%;
  top: 70px;
  width: 50px;
  height:30px;
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'wrapper'>
     <img src ='http://www.w3schools.com/html/pic_mountain.jpg'
       class = 'imgStyle'
   >
    <p class = 'txt'>Hello</p>
  </div>
</body>
</html>

HTML:
.wrapper {
  width: 100%;
  height: auto;
  background-color: red;
  text-align: center;
  position: relative;
}
.imgStyle {
  width: 50%;
  max-width: 200px; 
  height:120px;
}
.txt {
  z-index: 100;
  position: absolute;
  right:26%;
  top: 70px;
  width: 50px;
  height:30px;
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'wrapper'>
     <img src ='http://www.w3schools.com/html/pic_mountain.jpg'
       class = 'imgStyle'
   >
    <p class = 'txt'>Hello</p>
  </div>
</body>
</html>


JS-Bin
你好

演示：
.wrapper {
  width: 100%;
  height: auto;
  background-color: red;
  text-align: center;
  position: relative;
}
.imgStyle {
  width: 50%;
  max-width: 200px; 
  height:120px;
}
.txt {
  z-index: 100;
  position: absolute;
  right:26%;
  top: 70px;
  width: 50px;
  height:30px;
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'wrapper'>
     <img src ='http://www.w3schools.com/html/pic_mountain.jpg'
       class = 'imgStyle'
   >
    <p class = 'txt'>Hello</p>
  </div>
</body>
</html>


编辑：
.wrapper {
  width: 100%;
  height: auto;
  background-color: red;
  text-align: center;
  position: relative;
}
.imgStyle {
  width: 50%;
  max-width: 200px; 
  height:120px;
}
.txt {
  z-index: 100;
  position: absolute;
  right:26%;
  top: 70px;
  width: 50px;
  height:30px;
  background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'wrapper'>
     <img src ='http://www.w3schools.com/html/pic_mountain.jpg'
       class = 'imgStyle'
   >
    <p class = 'txt'>Hello</p>
  </div>
</body>
</html>

在我遇到的实际问题中，我无法将图像本身设置为文本的背景图像。
将您的html和css设置为如下所示：
.wrapper{
左：10%；
宽度：100%；
高度：自动；
背景色：红色；
文本对齐：居中；
位置：相对位置；
}
伊姆斯泰尔先生{
最大宽度：200px；
高度：120px；
宽度：100%；
}
.txt{
z指数：100；
位置：绝对位置；
右：0；
顶部：70像素；
宽度：50px；
高度：30px；
背景颜色：黄色；
}
.img集装箱{
宽度：50%；
显示：表格；
保证金：0自动；
位置：相对位置；
}


JS-Bin
你好
使您的html和css如下所示：
.wrapper{
左：10%；
宽度：100%；
高度：自动；
背景色：红色；
文本对齐：居中；
位置：相对位置；
}
伊姆斯泰尔先生{
最大宽度：200px；
高度：120px；
宽度：100%；
}
.txt{
z指数：100；
位置：绝对位置；
右：0；
顶部：70像素；
宽度：50px；
高度：30px；
背景颜色：黄色；
}
.img集装箱{
宽度：50%；
显示：表格；
保证金：0自动；
位置：相对位置；
}


JS-Bin
你好
您可以尝试内联块和垂直对齐

.wrapper{
背景色：红色；
文本对齐：居中；
位置：相对位置；
}
伊姆斯泰尔先生{
最大宽度：200px；
高度：120px；
}
.txt，
伊姆斯泰尔先生{
显示：内联块；
垂直对齐：底部；/*根据您的需要更新此值：顶部、中间、2米，任何您需要的*/
保证金：0；
}
.txt{
/*可选的
位置：绝对位置；
底部：0；
*/
背景颜色：黄色；
}
.img集装箱{
显示：表格；/*缩小内容并可以居中显示*/
保证金：0自动；
}

你好
您可以尝试内联块和垂直对齐

.wrapper{
背景色：红色；
文本对齐：居中；
位置：相对位置；
}
伊姆斯泰尔先生{
最大宽度：200px；
高度：120px；
}
.txt，
伊姆斯泰尔先生{
显示：内联块；
垂直对齐：底部；/*根据您的需要更新此值：顶部、中间、2米，任何您需要的*/
保证金：0；
}
.txt{
/*可选的
位置：绝对位置；
底部：0；
*/
背景颜色：黄色；
}
.img集装箱{
显示：表格；/*缩小内容并可以居中显示*/
保证金：0自动；
}

你好
使用一个额外的包装器，您可以将所有元素放置在中心，并保持img和文本的右边距关系，如下所示：

.wrapper{
左：10%；
宽度：100%；
高度：自动；
背景色：红色；
文本对齐：居中；
位置：相对位置；
}
.wrapper>div{
宽度：50%；
最大宽度：200px；
保证金：0自动；
位置：相对位置；
}
伊姆斯泰尔先生{
宽度：100%；
高度：120px；
}
.txt{
z指数：100；
位置：绝对位置；
右：0；
顶部：70像素；
宽度：50px；
高度：30px；
背景颜色：黄色；
}

你好
使用一个额外的包装器，您可以将所有元素放置在中心，并保持img和文本的右边距关系，如下所示：

.wrapper{
左：10%；
宽度：100%；
高度：自动；
背景色：红色；
文本对齐：居中；
位置：相对位置；
}
.wrapper>div{
宽度：50%；
最大宽度：200px；
保证金：0自动；
位置：相对位置；
}
伊姆斯泰尔先生{
宽度：100%；
高度：120px；
}
.txt{
z指数：100；
位置：绝对位置；
右：0；
顶部：70像素；
宽度：50px；
高度：30px；
背景颜色：黄色；
}

你好
是否要将图像设置为.wrapper div或container div的背景图像？否。我无法更改我所做的概念（在实际问题上，我使用的是一个未知的框架，这是实际问题的一个非常简化的版本，但如果我找到解决方案，我肯定会解决我的实际问题）用一个额外的包装纸会更容易你今晚救了我的命@DaniP非常感谢。如果您将其作为答案发布，我将优雅地接受。是否要将该图像设置为.wrapper div或container div的背景图像？否。我无法更改我所做的构思（关于实际问题，我使用的是一个未知的框架，这是实际问题的一个非常简化的版本，但如果我得到了解决方案，我肯定会解决我的实际问题）用一个额外的包装器会更容易你今晚救了我的命@DaniP非常感谢。如果你把它作为一个答案发布，我会优雅地接受它。谢谢你，它几乎可以工作。几乎是因为当我将屏幕宽度调整到869px以上时，我没有得到效果Put max width:200px用于类。img容器和它工作谢谢你，它几乎可以工作。Almost，因为当我将屏幕宽度调整到869px以上时，我没有得到class.img容器的effectput max width:200px，它可以工作